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

边界框约为1000x600，部分图像为500x100， 而其他一些是400x100（极端示例）。现在我想 将两者都放大到边界框能够显示的最大大小 处理，但保持规模

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

---

无法保持图像的比例。

我不知道是否有一种方法可以只用CSS来实现这一点。如果你想达到这样的目标，那么你可以使用

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

或者，如果您不关心较旧的浏览器，可以查看CSS3

背景大小

属性。具体来说，我认为设置

背景大小：cover

就可以了

---

编辑-我误解了。实际上，您可能需要的是

背景大小：contain

，但缺点是您可能需要更改html标记，而不仅仅是css。

您不能这样做。您可以编辑图像元素的

宽度

和

高度

属性

<!-- 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" /> 

---

但这将占用父元素宽度和高度的100%。因此，请确保您知道父元素是什么及其维度

您只能将“宽度”或“高度”设置为100%。例如

img {
    width: 100%;
}

或

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

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

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

---

基本上，您只需要包含

并为该容器指定尺寸，然后将

最大宽度：100%

应用于

，它将进行调整。阅读本文的其余部分，了解强制性IE注意事项（谢天谢地IE7+支持它）。

在我阅读这篇文章（）之前，我一直很难做到这一点，直到我阅读了这篇文章（），并将其列表分开（）放在一起

如果您的标记是这样的

<img src="myImg.jpg" />

这应该足够了，因为大多数现代浏览器意识到，如果有选择的话，大多数人都不想改变他们图像的外观。但是，如果标记包含维度属性，如

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

……或者

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

两者似乎都起作用，并迫使图像回到正确的方向

---

我自己刚刚偶然发现了这个问题（我的WYSIWIG编辑器在默认情况下会给图像添加阴影-我需要一个简单的解决方案，或者我需要花几个小时来破解JCE以阻止这种行为）虽然还没有对其进行全面测试，但如果您遇到与我相同的问题，它将为您提供一个良好的起点。

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

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

但是

---

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

到2020年更新。css属性

对象匹配

可用于以100%的宽度和高度显示图像，而不会使图像失真

.wrapper{
高度：100px；
宽度：100px；
边框：1px实心；
}
img{
宽度：100%；
身高：100%；
}
.包含{
对象匹配：包含；
}
.掩护{
对象匹配：覆盖；
}

↑ 默认情况下，高宽比不好
↑ <代码>对象匹配：包含
↑ <代码>对象匹配：覆盖

您是否在询问如何将所有图像缩放到容器的大小，以保持纵横比？

宽度

和

高度

属性需要在CSS像素中指定-百分比不是有效的，它们是…：当对象是图像时，它会被缩放。用户代理应尽最大努力缩放对象或图像，以匹配作者指定的宽度和高度。请注意，以百分比表示的长度基于当前可用的水平或垂直空间，而不是图像、对象或小程序的自然大小这应该是公认的答案，因为它清楚地解释了整个事情以及为什么它会起作用。

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

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

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