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" />

---

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

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

同样，这不是一个好的做法，请始终使用 CSS 来操作 HTML 元素。