我有一个2000x350的图片，我想在每个显示器中填充350px的高度。使用下面的代码，当我开始更改浏览器或视图大小时，图像开始拉伸或压缩。我想要使图像居中并填充我的固定高度。
有代码
HTML代码：
<div class="content">
<img src="image.png" class="image">
</div>
CSS代码：
.content{
display:block;
}
.image{
width:100%;
height: 350px;
background-position:center;
background-size: cover;
-o-background-size: cover;
}
有小提琴，我的例子
感谢帮助！
对不起，我的英语，那不是我的母语:)
使用CSS3 Flexbox布局模式：
width: 100%从...中删除.image.content{
display: flex;
justify-content: center;
width: inherit;
overflow: hidden;
}
这是一个小提琴：https : //jsfiddle.net/warkentien2/s1sfL2au/3/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句