用css将图像缩放为宽度和高度均可缩放

边界框约为1000x600，某些图像为500x100, ，而其他图像为400x100（极端示例）。现在我想规模都达到最大尺寸的边界框能够句柄，但保持它们的规模。用css将图像缩放为宽度和高度均可缩放

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

不会保持图像的比例。

来源

2012-04-14 Reactormonk

你是问如何将所有图像缩放到容器的大小，保持纵横比？ – 2012-04-14 23:28:29

@JoshDavenport正好。 – Reactormonk 2012-04-15 00:15:46

您可以只设置宽度或仅将高度设置为100％。例如。

img { 
    width: 100%; 
}

或

img { 
    height: 100%; 
}

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

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

来源

2012-04-14 23:06:02

我不知道是否有办法用CSS来做到这一点。如果你想实现像this那么你可以使用supersized

或者，如果你不关心旧的浏览器，你可以看看在CSS3 background-size财产。具体来说，我认为设置background-size: cover将做到这一点。

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

来源

2012-04-14 22:58:57 logan

现在这是过分的。 – Reactormonk 2012-04-14 23:02:32

你不能这样做。您可以编辑图像元素的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％。所以一定要知道父元素是什么以及它的尺寸。

来源

2012-04-14 23:01:47 Hristo

'width'和'height'属性需要在CSS像素中指定 - 百分比无效 – steveax 2012-04-15 01:10:11

是的，它们是... http://www.w3.org/TR/html4/struct/objects.html#adef- height-IMG：“当对象是一个图像时，它将被缩放，用户代理应该尽可能地缩放对象或图像以匹配作者指定的宽度和高度。请注意，以百分比表示的长度基于水平或当前可用的垂直空间，而不是图像，对象或小程序的自然大小。“ – Hristo 2012-04-15 01:27:14

我认为这篇文章可能对你有很大帮助，它讨论了适应其容器的响应图像，保持纵横比。

基本上，您只需包含<img>并指定该容器的尺寸大于将max-width:100%应用于<img>并且它将适应。阅读本文的其余部分以了解IE的重要性（幸好IE7 +支持它）。

来源

2012-04-14 23:39:44

我在阅读本主题（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来阻止这种行为），并且还没有详尽地测试它但如果你和我有同样的问题，它应该给你一个很好的起点。

来源

2013-04-15 12:07:35 Doug

这应该是被接受的答案，因为它清楚地解释了整个事情以及它为什么起作用。 – MetalPhoenix 2015-03-21 18:04:50

只设置宽度或高度并不总是工作，所以或者你可以设置：

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

但

也不会超过其原始大小扩展图像

来源

2016-01-18 14:54:18 ise

用css将图像缩放为宽度和高度均可缩放

回答

相关问题