CODEWITHSUNDEEP
htmlcss
l00per
l00per

Reputation: 491

CSS Crop or Scale Image to DIV with 100% Width

Is it possible to crop (scale) an image in a DIV?

I've tried this, the right (black) portrait image will be cropped – the left (red) landscape image should be scaled and cropped as well. Is it possible with CSS only?

http://jsfiddle.net/Q4MuZ/

img {
    width: 100%;
    max-width:100%;
    height: auto;
    max-height: auto;
}

Upvotes: 2

Views: 2830

Answers (1)

zozo
zozo

Reputation: 8612

To scale an image, you are on the right track. To crop an image you can put it inside an element (for example a div), then give it fixed dimensions and overflow: hidden.

Upvotes: 1

Related Questions