边界框大小约为1000x600，有些图像为500x100， 而另一些则是400x100（极端情况）。现在我想将它们都缩放到 边界框能处理的最大尺寸，但保持它们比例不变。
img {
width: 100%;
height: 100%;
}
图片不会按比例缩放。
7个回答
9
您可以将宽度或高度设置为100％。例如：
img {
width: 100%;
}
或者
img {
height: 100%;
}
这样可以保留图像比例，但是图像可能会溢出容器。
这种方法可能不适用于所有浏览器，但最新版本的Firefox、Chrome和Opera都支持。我以前在使用时遇到过一些奇怪的问题，我的解决方法是在服务器上计算新的图像大小。
- Lars Nyström
7
我读了这篇帖子 (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闪耀，使图像保持固定的高度但宽度灵活（呃！），除非您使用类似以下内容的其他方式告诉它：
img {
width:100%;
height:inherit;
}
...or...
img {
width:100%;
height:auto;
}
两种方法都可以使图像恢复正确的比例。
我最近也遇到了这个问题（我的所见即所得编辑器默认添加图像尺寸 - 我需要一个简单的解决方案，否则我需要花费数小时来破解JCE以阻止这种行为），但我还没有对其进行全面测试，但如果您和我一样遇到了同样的问题，这应该会给您一个很好的起点。
- Doug
1
这应该是被接受的答案，因为它清楚地解释了整个事情以及其工作原理。 - user4593252
2
我不知道是否有办法只用CSS实现这种效果。如果你想要实现类似这个网站的效果，那么你可以使用supersized。
或者，如果你不关心旧浏览器，你可以研究一下CSS3的background-size属性。具体来说，我认为设置background-size：cover就可以解决问题了。
编辑 - 我误解了。你可能真正想要的是 background-size:contain，但缺点是你可能需要改变你的HTML标记，而不仅仅是CSS。
- logan
1
仅设置宽度或高度并不总是有效的，因此您可以选择设置：
img {
max-width: 100%;
max-height: 100%;
}
但是
它不会将图像扩展到原始大小之外
- ise
1
我认为这篇A List Apart文章可能会对你有很大帮助，它讨论了响应式图片的适应性，保持其纵横比。
基本上，你只需要包含<img>并为该容器指定尺寸，然后将<img>应用max-width:100%即可自适应。阅读文章的其余部分以了解必要的IE注意事项（幸运的是，IE7+支持它）。
- Josh Davenport-Smith
0
2020年的更新。CSS属性object-fit可以用来显示一个图像，使其宽度和高度都达到100%，而不会扭曲。
.wrapper {
height: 100px;
width: 100px;
border: 1px solid;
}
img {
width: 100%;
height: 100%;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}<div class="wrapper">
<img src="https://istack.dev59.com/6c39r.webp" />
</div>
↑ default, bad aspect ratio
<div class="wrapper">
<img src="https://istack.dev59.com/6c39r.webp" class="contain" />
</div>
↑ <code>object-fit: contain;</code>
<div class="wrapper">
<img src="https://istack.dev59.com/6c39r.webp" class="cover" />
</div>
↑ <code>object-fit: cover;</code>- Cameron Little
0
你不能这样做。你可以编辑图像元素的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%宽度和高度。所以请确保您知道父元素是什么以及其尺寸。
- Hristo
2
width和height属性需要用CSS像素来指定，百分比无效。 - steveax是的，它们是这样的... http://www.w3.org/TR/html4/struct/objects.html#adef-height-IMG: "当对象是图像时，它会被缩放。用户代理应尽力缩放对象或图像以匹配作者指定的宽度和高度。请注意，以百分比表示的长度基于当前可用的水平或垂直空间，而不是基于图像、对象或小程序的自然大小。" - Hristo
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接