Question

使用全宽背景图像时，您可以设置背景尺寸：封面。使图像适合屏幕而不会失去图像质量。

图像是否有类似的解决方案？

我在全屏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;
}

那么有什么建议吗？缩放，调整大小......？

Answer 1

使用此解决方案，图像适合100％宽度并被裁剪为500px高度：

.node-type-article{
    width: 100%;

}
.node-type-article .group-header{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}
.node-type-article .group-header img{
    width: 100%;

}

Fiddle

或者使用此解决方案，图像也是100％宽度，但它的高度拉伸/缩小到500px：

.node-type-article{
    width: 100%;

}
.node-type-article .group-header{
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.node-type-article .group-header img{
    width: 100%;
    height: 100%;
}

Fiddle

或者查看此笔：http://codepen.io/ErwanHesry/pen/JcvCw

背景大小类似于全宽div中的图像的值

1 个答案: