当图像宽于div时,如何使图像适合div元素？

Question

我在div元素中有一个图像标记.

<div id = "myDiv">
 <img alt = "myImage" src = "some_source"/>
</div>

图像大于div,因此图像不在div元素内.首先,我考虑过使用width = x,height = y.但是,由于我仍在设计页面,我担心必须一直担心这两个方面.

如何将图像保留在div元素中？还有,尊重div元素的维度？

谢谢你的帮助

Answer 1

从这里:三种方法来调整图像大小以适应DIV

使用IMG标记中的STYLE属性手动设置每个图像的宽度或高度(与#1基本相同).

<div id="img_box">
<img style="width: 100%;" src="path/to/horizontal_image.jpg" />
</div>
<div id="img_box">
<img style="height: 100%;" src="path/to/vertical_image.jpg" />
</div>

希望它能解决你的问题.

编辑:最佳解决方案是使用服务器端脚本实际调整图像大小.在浏览器中缩放图像通常不会很好.

Edit2:http://unstoppablerobotninja.com/entry/fluid-images

Answer 2

这对我有用.

 .myimg {width:200px; height:auto;}

在所有浏览器中自动重新调整图像大小.