varatis varatis - 8 months ago 34
CSS Question

Contain an image within a div?

I want to contain an image into a 250 x 250 div, forcing the image to resize but not stretch. How can I do this? By the way, the image will usually be bigger than the div itself, which is why resizing comes into the picture.

<div id = "container">
<img src = "whatever" />

#container { width:250px; height:250px; border:1px solid #000; }

Here's a jsfiddle which someone can edit:


Use max width and max height. It will keep the aspect ratio

#container img 
 max-width: 250px;
 max-height: 250px;