图像应始终具有 100% 的高度，但具有纵横比答案

【问题标题】：image should always have 100% height but with aspect ratio图像应始终具有 100% 的高度，但具有纵横比
【发布时间】：2021-03-03 23:14:59
【问题描述】：

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

我尝试过使用 CSS：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

将 CSS 更改为：

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

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

【讨论】：

好的，但它没有响应。正如您在我的演示中看到的那样，该网站是响应式的，当我将窗口缩小到它的宽度时，图像不会缩小它的宽度。
这正是我所需要的：jsfiddle.net/audetwebdesign/y2L3Q 唯一的问题是：当它进入响应状态并且我给父 DIV 一个“自动”高度时，它表现得很疯狂。

【解决方案2】：

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

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

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

【讨论】：

这样它在高度上没有响应。
我认为没有 CSS 唯一的解决方案。有人做了这个：jsfiddle.net/audetwebdesign/y2L3Q，它非常适合。我必须弄清楚如何将其粘贴到我的响应式设计中。
我现在使用了这个解决方案，因为其他所有选项都会导致更多问题。

【解决方案3】：

使用 CSS 标签“宽度”和“高度”使其更大。例如：

width: 200%;
height: 200%;

祝你好运！

【讨论】：