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

Posted 2023-03-05

【中文标题】用CSS按比例调整图像大小，有可能吗？

【英文标题】：resize an image in proportion with CSS, is it possible?

【发布时间】：2011-07-10 06:09:16

【问题描述】：

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

容器有固定的宽高

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

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

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

【问题讨论】：

Resize image proportionally with CSS?的可能重复

好发现！感谢您向我指出这一点。

【参考方案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 属性。

有用的文章：Control image aspect ratios with CSS3

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

【讨论】：

是的，不幸的是它没有（

奇怪，因为object-fit是标准的css3 w3.org/TR/css3-images/#object-fit