使用全宽背景图像时，您可以设置背景尺寸：封面 . 使图像适合屏幕而不会损失图像质量 .
是否有类似的图像解决方案？
我在全屏div（最大高度：500px）中使用图像，但是当将全宽度应用于图像时，图像高度要高得多（1000px），因此有一种解决方案可让这个图像完美地适合100％宽度div最大高度为500px？
我现在使用的是margin-bottom：-20％但是图像分辨率是垃圾并且放大了很多 .
.node-type-article .group-header{
margin: 0 -100% 50px -100%;
max-height: 500px;
}
.node-type-article .group-header img{
margin-bottom: -20%;
}
.node-type-article .l-main{
overflow: visible !important;
}
那有什么建议吗？缩放，调整大小，......？
1 回答
使用此解决方案，图像适合100％宽度，并裁剪为500px高度：
}
.node-type-article .group-header {
宽度：100％;
最大高度：500px;
溢出：隐藏;
}
.node-type-article .group-header img {
宽度：100％;
}
小提琴
或者使用此解决方案，图像也是100％宽度，但它的高度拉伸/缩小到500px：
}
.node-type-article .group-header {
宽度：100％;
身高：500px;
溢出：隐藏;
}
.node-type-article .group-header img {
宽度：100％;
身高：100％;
}
小提琴
或者检查一下这支笔：http://codepen.io/ErwanHesry/pen/JcvCw