是否有仅 css 的解决方案可以将图像缩放到边界框(保持纵横比)?如果图像大于容器,则此方法有效:
img {
max-width: 100%;
max-height: 100%;
}
例子:
- 用例 1(有效):http://jsfiddle.net/Jp5AQ/2/
- 用例 2(有效):http://jsfiddle.net/Jp5AQ/3/
但我想放大图像直到尺寸为容器的 100%。
- 用例 3(不起作用):http://jsfiddle.net/Jp5AQ/4/
最佳答案
感谢 CSS3 有一个解决方案!
解决方法是将图片作为background-image
,然后设置background-size
为contain
。
HTML
<div class='bounding-box'>
</div>
CSS
.bounding-box {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
在这里测试:http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
与最新浏览器完全兼容:http://caniuse.com/background-img-opts
要将 div 居中对齐,您可以使用以下变体:
.bounding-box {
background-image: url(...);
background-size: contain;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
关于html - 缩放图像以适合边界框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9994493/