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>

Answer 2

您尝试过

`
    background-image: url('your-image.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 

    `

Answer 3

我认为这是您想要的：

body {
  margin: 0px;
  padding: 0px;
}

div {
  width: 100vw;
  height: 600px;
  background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
  background-size: 100% 600px;
  float: left;
  background-position: center;
}

<div>
  test
</div>

希望这对您有所帮助。

CSS将高度和裁切宽度保持在div中

3 个答案: