裁剪人像图像并调整尺寸以制作风景封面css

Question

我有这样的图片image

使用HTML和CSS，如何裁剪图像的中间部分并将其变成横向封面背景，如下图所示：

pic

[背景应为全屏时100％的宽度和高度，大约为400-500px，并具有响应能力。增加如何制作搜索框的方法也很棒。谢谢。

Answer 1

此CSS应该这样做：

.container {
  height: 100vh; 
  background-color: #e3e3e3;
  display: flex; 
  align-items: center;
}
.image {
  width: 100%; height: 200px; background-color: white;
  background: url(https://i.stack.imgur.com/l7pP3.jpg) center center;
  background-size: cover;
}

这里是一个示例：https://jsfiddle.net/7ka9jbhg/3/