How do I display cropped image on homepage in wordpress?

Question

How do I show cropped image of a very long image in wordpress and place a " Read More " permalink to the full article/post at the bottom . Like this

This is from the home page

http://s28.postimg.org/l8qbm85rh/image.jpg

This is the full post ( the original image is very long )

http://s28.postimg.org/85zagp4x9/image.jpg

Answer 1

There are many options for cropping an image. This jsfiddle includes a couple. Uncomment the styles in the css section to view 2 ways of doing this.

HTML

<div>
    <img id="myImage" src="http://s28.postimg.org/85zagp4x9/image.jpg">
</div>

CSS

/*div{
    overflow:hidden;
    width:300px;
    height:300px;
}*/

OR

/*#myImage {
    position:absolute;
    clip:rect(150px, 650px, 640px, 140px);
}*/