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

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

css image

— 尼克·黄
source

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

— Theodore Enderby 2014年

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

— 考拉杨

Answers:

122

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

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

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

此代码段包含两个框，一个框小于图像，一个框大于图像。如您所见，较小框中的图像按比例缩小，而较大框中的图像具有正常尺寸。

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>

展开摘要

— 李斯特先生
source

如果有人（例如我）想知道如何覆盖继承的宽度设置，只需在要分配给图像的新类中添加width：auto即可。

— grasskode，2016年

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

— 汤姆

@Tom是正确的，根据OP问题中的条件。您有其他情况吗？在这种情况下，最好提出一个新问题。

— 李斯特先生

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

— 汤姆

@MrLister developer.mozilla.org/zh-CN/docs/Web/CSS/max-width max-width以百分比形式定义max-width以包含块的宽度的百分比表示

— Tom

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

如果这些是用户上传的图像，并且您使用的是PHP（例如，PHP），请使用getImageSize（）查找图像宽度，然后以编程方式将样式标签添加到图像。

— 南希·黑斯廷斯
source