CSS Div和图像最大宽度

Question

我希望在保持宽高比的同时使图像适合div。我看到其他帖子提到使用max-width:100%;。

当图像小于div时，它工作正常，图像保持在div内的大小。但是当图像越大时，它就会脱离div。

<img src="testimg.jpg" style="max-width:100%;max-height:100%;"/>

但是当我使用这段代码时：

<img src="testimg.jpg" width=540px/>

调整大图像的大小以适合div，但不保持其宽高比。

有人可以就上述问题提出建议吗？

Answer 1

这应该保持宽高比：

<img src="testimg.jpg" style="max-width:100%; max-height:auto;"/>

我不建议使用内联CSS，而是将其分开：

<强> CSS：

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

<强> HTML：

<img src="testimg.jpg" />

---

对于代码的第二部分，width属性表示图像的精确宽度，而不是最大宽度。在HTML5中，值必须以像素为单位，但没有px后缀：

<img src="testimg.jpg" width="540" />

同样，这不是一个好习惯，总是使用CSS来操作HTML元素。

Answer 2

max-width：100％仅当img标签没有width和height属性时才有效，因为它们以max-width为准。所以请尝试删除width =＆＃34; 540＆＃34;

Answer 3

请尝试以下CSS

DIV {ovwerflow：无;}

IMG {宽度：100％;最大高度