10

I have a DIV of size 147x88 and inside it an image which has the same width, but might be larger in height. In this case, the image goes beyond the boundary of the DIV. Is there anyway to clip the image, keeping in mind that I want my page to work in old browsers which doesn't support CSS3 (IE7 and IE8)?

Rafid
  • 18,991
  • 23
  • 72
  • 108

4 Answers4

11

Just hide the overflow of the div, and the containing image will be cropped to the dimensions of the div.

div{width: 147px; height: 88px; overflow: hidden;}
theorise
  • 7,245
  • 14
  • 46
  • 65
  • `overflow: hidden` works for static content. However, what if you are animating the content inside the div? The overflow cancels while it's animating and then comes back when the animation is done. Any workarounds? – Pyroglyph Sep 04 '16 at 18:46
5

Set overflow:hidden; on the div:

#yourDiv {
width:147px;
height:88px;
overflow:hidden;
}

Example: http://jsfiddle.net/purmou/sN5PL/

Purag
  • 16,941
  • 4
  • 54
  • 75
4

div { width: 147px; height: 88px; overflow: hidden; }

0

This question shows how to get the size of the image using JQuery. You can have a little block that checks the size of the image when loading the page, and the set the size of the DIV accordingly.

Community
  • 1
  • 1
Nicolas Modrzyk
  • 13,961
  • 2
  • 36
  • 40