html - CSS在div中保持高度，裁剪宽度

Question

我找了好久，还是找不到确切的答案。我有一个 <div>其中宽度占屏幕的100%，高度固定为600px。我想将背景图片添加到图片高度适合 <div> 的 div高度(600 像素，无图片裁剪)。每当我修改屏幕的宽度时，高度应始终保持 600px。然后图片将居中并在宽度方向上裁剪。

Answer 1

试试这个:

.container {
  width: 100%;
  height: 600px;
  background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

<div class="container"></div>