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

【问题标题】：CSS image max-width set to original image size?CSS图像最大宽度设置为原始图像大小？
【发布时间】：2014-08-03 13:33:51
【问题描述】：

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

【问题讨论】：

图像自然应该是它的大小。您是否也将图像设置为宽度：100？
没有。你不能。 CSS 无法知道随机图像的实际大小。您需要 javascript 来检测图像大小并缩放图像。

标签： css image

【解决方案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" alt="" />
</div>
<div class="box2">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</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() 查找图像宽度并以编程方式将样式标记添加到图像。

【讨论】：