Question

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

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

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

如何将图像保留在div元素中？另外，尊重div元素的维度？

感谢您的帮助

Answer 1

从这里开始：Three ways to resize images to fit a 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;}

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

Answer 3

伙计们花了太多时间四处寻找更简单的方法，我将研究中的信息结合起来：（仅使用getimagesize()函数 - 如果高度大于宽度，使用高度为100％的样式回显图像标记，否则回显相同的图像标记，但样式的宽度为100％）;

$image = "path to your image";
$img_size = getimagesize($image);

if ($img_size[0] < $img_size[1]){echo " < img src= '$image'  style='height:100%;'>";}
else {echo "< img src= '$image'  style='width:100%;'>";}

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

3 个答案: