Css 如何作出回应；“自裁剪”；背景图像？

我正在开发一个wordpress主题，我有点问题。 在我的主页中，我希望有一个宽背景图像和一些文本居中。到目前为止相当标准。 问题是，我希望高度保持不变，随着浏览器变小，图像应该从两侧相应地裁剪，以便图像保持居中。 这是我发现的一个很好的例子，试着调整它的大小，看看顶部的大图：

我怎样才能得到这种效果

提前感谢：）

您可以使用具有值的属性

cover

，该属性就是为此而创建的

封面
与包含相反的关键字。尽可能放大图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像将被剪裁为左/右或上/下

---

设置您需要的高度（您可以为FHD、HD、平板电脑、移动媒体查询设置不同的高度），图像将从侧面裁剪并根据需要缩放（如果它比您设置的高度短）

另外，使用背景尺寸：封面

您应该使用“视口高度”来控制图像的高度。这样，无论是台式机、笔记本电脑、手机等，它都将始终是视图端口高度的某个百分比。这是显示高度的更流畅的方式

示例（覆盖整个屏幕）：

示例（覆盖半个屏幕）：

---

相应地调整。

该死，那太简单了！非常感谢你！对不起，我是个笨蛋！

.yourelement {
  height: 100vh;
}

.yourelement {
  height: 50vh;
}