响应图像：保持高度，保持居中

Question

我有一个全宽图像，在手机尺寸上缩小太小。我尝试添加height:250px; width:auto（在媒体查询中），它提供了很大的尺寸，但图像不居中。我该如何居中呢？

图片太小了：

图片未居中：

Answer 1

使用background-image

尝试background-position: center center;

.image {
  border: 1px solid lightblue;
  height: 250px;
  background-image: url('http://via.placeholder.com/1600x500');
  background-size: cover;
  background-position: center center;
}

<div class="image"></div>
<h1>Header</h1>
<p>Lorem ipsum</p>