html - 图像应始终具有 100% 高度但具有纵横比

Question

我在网站中有一张图片(该网站是响应式的)。图像应始终具有父 div 的 100% 高度(高度为 100%)，但具有纵横比。 my example

我尝试使用 CSS:

max-height: 100%;
max-width: 100%;
width: auto!important;

但这样一来，图片的高度始终是原始尺寸的 100%。我希望它比原始尺寸大，但要有纵横比。

Answer 1

将 CSS 更改为:

height: 100%;
display: block;
float: right;

通过删除所有宽度引用，即使不是所有浏览器，大多数浏览器也会按比例缩放它并保持纵横比。通过将高度指定为 100%，它将使图像的高度适合父容器的高度并保持响应。