CSS图像最大宽度设置为原始图像大小？

Posted 2023-03-06

【中文标题】CSS图像最大宽度设置为原始图像大小？

【英文标题】：CSS image max-width set to original image size?

【发布时间】：2014-08-03 13:33:51

【问题描述】：

你能做到吗？我让用户将图像上传到宽度为 100% 的容器中，但我不希望图像大于原始大小。非常感谢！

【问题讨论】：

图像自然应该是它的大小。您是否也将图像设置为宽度：100？

没有。你不能。 CSS 无法知道随机图像的实际大小。您需要 javascript 来检测图像大小并缩放图像。

【参考方案1】：

只是不要设置图片的width，只设置max-width。

img max-width:100%; height:auto

（height:auto 不是必需的，因为auto 是默认设置，但我把它放在那里是为了提醒自己，我希望图像具有其自然比例。）

这个sn-p有两个盒子，一个比图片小，一个比图片大。如您所见，较小框中的图像被缩小，而较大框中的图像具有正常大小。

div border:2px outset green; margin:6px 0
.box1 width:100px; height:70px;
.box2 width:200px; height:100px;
img max-width:100%; height:auto

<div class="box1">
    <img src="https://i.stack.imgur.com/FuQYf.png"  />
</div>
<div class="box2">
    <img src="https://i.stack.imgur.com/FuQYf.png"  />
</div>

【讨论】：

如果有人（像我一样）想知道如何覆盖继承的宽度设置，只需在您将分配给图像的新类中添加 width:auto。

这会将最大宽度设置为容器的大小，而不是图像的原始（或自然）大小。

这不是我阅读 OP 要求的方式。他要求它不要超过原始/自然尺寸，而不是不要超过容器。

@MrLister developer.mozilla.org/en-US/docs/Web/CSS/max-width max-width as a percentage 将最大宽度定义为包含块宽度的百分比

建议用于横向图像，其中宽度是主要因素。它必须为肖像图像设置最大高度。一般来说，选择取决于纵横比 (H/W)，但这在运行时是不切实际的。

【参考方案2】：

您可以在图像本身的样式标签中设置图像的最大宽度。 然后在样式表中将显示类型设置为“块”，将宽度设置为您想要的容器的任何百分比，并将高度设置为自动。然后添加 margin: 0px auto ，它应该完全居中并且永远不会大于它的原始大小。

如果这些是用户上传的图像并且您正在使用 php，例如，使用 getImageSize() 查找图像宽度并以编程方式将样式标记添加到图像。