Question

边界框约为1000x600，有些图像为500x100，而其他一些是400x100（极端的例子）。现在我想缩放到边界框能够达到的最大大小处理，但要保持规模。

img {
  width: 100%;
  height: 100%;
}

无法保持图像规模。

Answer 1

直到我读完这个帖子（resize view width, preserve image aspect ratio with CSS）和List Apart文章（http://alistapart.com/article/fluid-images）并将它们放在一起之后，我才遇到这个问题。

如果您的标记是这样的......

<img src="myImg.jpg" />

...然后简单地陈述

img {
    width:100%
}

应该足够了，因为大多数现代浏览器都意识到大多数人在给出选择的情况下不想改变他们图像的方面。但是，如果您的标记包含维度属性，如...

<img src="myImg.jpg" width="400" height="400" />

...哪个，意味着更好的技术，然后标记将通过CSS发光保持图像在固定的高度但灵活的宽度（urgh！）除非你用其他东西告诉它...

img {
    width:100%;
    height:inherit;
}

...或...

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

两者似乎都有效并将图像强制恢复到正确的方面。

我自己偶然发现了这个问题（我的WYSIWIG编辑器默认为图像添加了暗淡 - 我需要一个简单的解决方案，或者我需要花费数小时来攻击JCE来阻止这种行为）并且还没有详尽地测试它但是如果你和我有同样的问题，它应该给你一个很好的起点。

Answer 2

您只能将宽度或高度设置为100％。 E.g。

img {
    width: 100%;
}

或

img {
    height: 100%;
}

这将保留图像比例，但图像可能会溢出容器。

这可能不适用于所有浏览器，但它适用于最新版本的Firefox，Chrome和Opera。我过去曾经遇到过这种奇怪的经历，我的解决方案是在服务器上计算新的图像大小。

Answer 3

我认为这篇A List Apart文章可能对您有很大的帮助，它会讨论适应其容器的响应式图像，并保持宽高比。

基本上，您只需要包含<img>并指定该容器的维度，而不是将max-width:100%应用于<img>，它就会适应。阅读本文的其余部分以了解IE的必要注意事项（幸好IE7 +支持它）。

Answer 4

仅设置宽度或高度并不总是有效，因此您也可以设置：

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

BUT

它不会将图像扩展到原始大小

Answer 5

我不知道是否有办法用CSS做到这一点。如果您希望获得this之类的内容，则可以使用supersized

或者，如果您不关心旧版浏览器，可以查看CSS3 background-size属性。具体来说，我认为设置background-size: cover可以解决问题。

编辑 - 我误解了。你真正想要的是background-size: contain，但缺点是你可能不得不改变你的html标记，而不仅仅是你的css。

Answer 6

你不能这样做。您可以修改图片元素的width和height属性...

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />

<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" />

您可以将width和height设置为像素或百分比。请注意，在使用像素时您不必编写px，但在执行百分比时，执行必须写%。所以你可以做点像......

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />

... 但这将占用父元素的宽度和高度的100％。所以一定要知道父元素是什么及其尺寸。

Answer 7

对此进行了2020年的更新。css属性mpos可用于以100％的宽度和高度显示图像而不会使其变形。

target

0, 10, 0 - 0, 10, 0

使用css将图像缩放到宽度和高度以进行缩放

7 个答案: