如何在 html/css 中保持宽高比的同时居中和放大或缩小图像？
我有一个小提琴显示我当前的解决方案，但它在需要时不会放大图像（请参阅最后一个 div）：http://jsfiddle.net/4Mvan/438/
.container {
margin: 10px;
width: 115px;
height: 115px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
我需要一个适用于所有主要浏览器 (IE10+) 的解决方案
Thanks
您可以删除内部 img 元素并执行以下操作。
无论图像比例如何，这都有效。
.container {
margin: 10px;
width: 115px;
height: 115px;
border: 1px solid red;
background: url(http://i.imgur.com/H9lpVkZ.jpg) no-repeat center center;
background-size: contain;
}
<div class='container'>
</div>
<div class='container' style='width:50px;height:100px;line-height:100px'>
</div>
<div class='container' style='width:140px;height:70px;line-height:70px'>
</div>
This one should scale up
<div class='container' style='width:350px;height:350px;line-height:350px'>
</div>
如果您知道每个图像道具。对于每个容器，您只需保留 html 即可执行此操作。
.container {
margin: 10px;
width: 115px;
height: 115px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
vertical-align: middle;
}
.fit_width {
width:100%;
}
.fit_height {
height:100%;
}
<div class='container'>
<img class='resize_fit_center fit_width'
src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>
<div class='container' style='width:50px;height:100px;line-height:100px'>
<img class='resize_fit_center fit_width'
src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>
<div class='container' style='width:140px;height:70px;line-height:70px'>
<img class='resize_fit_center fit_height'
src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>
This one should scale up
<div class='container' style='width:350px;height:350px;line-height:350px'>
<img class='resize_fit_center fit_width'
src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
