Search code examples
csscrop

Cropping a photo

I have a photo that is about 240px x 366 px. My width is just how I would like it. I need to include only the middle 100 px vertically so essentially I will have the middle of the photo shown vertically across the entire width.

This is the code I have so far: 

var img = '<img title="' + title + '" alt="' + title + '" class="blog-image-ind" src="' + imgSrc + '" width="240" style="float:left;" />'
Solution

  • You can include the img in a div, set that div to overflow: hidden and height: 100px, and the img to margin-top: -133px

    <div id="cropimage">
    <img src="whatever" alt="whatever">
</div>

    CSS:

    #cropimage { overflow: hidden; height: 100px }
#cropimage img { width: 240px; height: 366px; margin-top: -133px }

    Fiddle: http://jsfiddle.net/9L9MJ/

    (no actual image)