我正在开发一个wordpress主题，但我遇到了一些问题。 在我的主页上，我想要一个带有一些文本的宽背景图像。到目前为止很标准。 问题是，我希望高度保持不变，随着浏览器变小，图像应相应地从两侧裁剪，以使图像保持居中。 这是我发现的一个很好的例子，尝试调整它并查看顶部的大图： http://www.shopstyle.com/
我怎样才能获得这种效果？
提前致谢！：）
答案 0 :(得分：1)
您可以使用值cover的属性background-size，这是为此目的而制作的
<强>盖
与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比（图像不会被压扁）。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像将被左/右或上/下剪裁。
设置所需的高度（您可以为FHD，HD，平板电脑，移动设备设置不同的高度和媒体查询），图像将从侧面裁剪并根据需要进行缩放（如果它比您设置的高度短）
答案 1 :(得分：0)
另外使用background-size：cover;
您应该使用视口高度来控制图像的高度。这样，无论是台式机，笔记本电脑，手机等，它都将始终是视口高度的一定百分比。这是显示高度的更流畅的方式。
示例（涵盖整个屏幕）：
.yourelement {
height: 100vh;
}
示例（覆盖屏幕的一半）：
.yourelement {
height: 50vh;
}
相应调整。