在div中包含图像？ [英] Contain an image within a div?

问题描述

我想将图片包含到250 x 250的div中，强制图片调整大小，但不能拉伸。我如何做到这一点？顺便说一句，图像通常会比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" />
</div>

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

这里是一个可以编辑的jsfiddle：

Here's a jsfiddle which someone can edit:

http://jsfiddle.net/rV77g/

推荐答案

使用最大宽度和最大高度。它将保持宽高比

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

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

http://jsfiddle.net/rV77g/

这篇关于在div中包含图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！