用CSS按比例调整图像大小，有可能吗？答案

【问题标题】：resize an image in proportion with CSS, is it possible?用CSS按比例调整图像大小，有可能吗？
【发布时间】：2011-07-10 06:09:16
【问题描述】：

有没有办法使用 CSS 调整图像的大小并保持其比例？

容器有固定的宽高

<div class="container">
   <img class="theimage" src="something" />
</div>

我问的原因是因为布局可以改变（通过一个类从列表到图标）并且图像需要按比例调整大小（大约减少 40%）。

我知道如何用 JavaScript 做到这一点，也知道如何通过 CSS 调整大小，但我真的不相信它可以用 CSS 以 proportion 做到这一点，除非有一些聪明的方法。

【问题讨论】：

【解决方案1】：

.theimage{
    width:100%;
    height:auto;
}

或

.theimage{
    width:auto;
    height:100%;
}

取决于您希望如何给出比例偏好... :) :)

就是这样。

【讨论】：

但这并不能解决问题，我不知道每个图像的比例，所以我不能只将一个设置为 100%，只需在 jsfiddle 检查我的示例并自己尝试.
你是说失去纵横比对你来说很好......唯一关心你的事情就是让图像适合那个div？如果不是，那么上述其中一项将解决您的问题，具体取决于哪一个成为您的瓶颈......是宽度还是高度......但如果不是......只需使用宽度：100％，高度：100％.. .jsfiddle.net/arindam89/fDNah/12
不，我需要保留比例（检查这个问题的标题），这不是 javascript 我找不到最大的（高度或宽度），所以你建议的 CSS 对我不起作用，你看到我的问题了吗？

【解决方案2】：

要在缩放时保存图像比例，您可以使用object-fit CSS3 属性。

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

【讨论】：