图像应始终具有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％，它将使图像的高度适合父容器的高度并保持响应。

Answer 2

使用CSS标签“width”和“height”使其更大。例如：

width: 200%;
height: 200%;

祝你好运！

*Fiddle Demo

Answer 3

您是否考虑过将CSS更改为以下内容？

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

这样，您的所有图像都会响应其父元素的宽度并保持其宽高比