html - 如何使用设置的高度和宽度值在 div 中将完整图像显示为背景

Question

我正在尝试为具有设置高度和宽度的 div 设置背景。结果是它裁剪掉了不在 div 所在位置的图像部分。我希望图像按比例缩小以适应 div 的大小。

<div style="width: 512px; height: 288px; margin-left:auto; margin-right:auto; margin-bottom: 1em; background-attachment:fixed; background-position:center; background-repeat: no-repeat; background-size: contain;background-image: url(image url)></div>

Answer 1

如果您希望您的图像拉伸(stretch)，以在所有方向上填充其容器而不裁剪，请使用 background-size: 100% 100%;。如果容器的宽高比与图像本身不同，这将使图像变形。

如果您希望图像在一个方向上填充其容器，而不裁剪和拉伸(stretch)，请使用 background-size: contain;。如果容器的纵横比与图像本身不同，这可能会在侧面或顶部/底部留下未使用的空间。

如果您希望图像在各个方向填充其容器，根据需要裁剪但不拉伸(stretch)，请使用 background-size: cover;。如果容器的宽高比与图像本身不同，这可能会裁剪部分图像的侧面或顶部/底部。

此代码段演示了这些技术之间的区别。在所有这三种情况下，500x500 的图像都被放入 500x250 的 div 中。

div {
  width: 500px;
  height: 250px;
  border: 1px solid black;
}

#stretch-demo {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://via.placeholder.com/500');
}

#contain-demo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://via.placeholder.com/500');
}

#cover-demo {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://via.placeholder.com/500');
}

<div id="stretch-demo"></div>
<br><br>
<div id="contain-demo"></div>
<br><br>
<div id="cover-demo"></div>

这是完整的源图像:

这是所有三种技术的截图:

---

附录

我注意到您正在使用 background-attachment: fixed;。

我假设这是因为您想用内容填充您的 div，并允许 div 有一个滚动条，但要避免让背景图像随着内容“滚动”。

为此，您应该改用 background-attachment: scroll;。

div {
  width: 500px;
  height: 250px;
  border: 1px solid black;
  overflow-y: scroll;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  background-image: url('https://via.placeholder.com/500');
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Gravida neque convallis a cras semper auctor neque
  vitae tempus. Quis eleifend quam adipiscing vitae. Maecenas sed enim ut sem. Sapien eget mi proin sed libero enim sed faucibus. Lectus mauris ultrices eros in cursus. Tellus orci ac auctor augue. Malesuada pellentesque elit eget gravida cum sociis.
  Arcu felis bibendum ut tristique et egestas quis ipsum. Amet aliquam id diam maecenas ultricies mi. Erat nam at lectus urna duis convallis convallis tellus. Imperdiet dui accumsan sit amet nulla. Condimentum id venenatis a condimentum vitae sapien pellentesque
  habitant morbi. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Non blandit massa enim nec dui nunc. Leo urna molestie at elementum eu. Interdum varius sit amet mattis. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce
  ut. Sit amet volutpat consequat mauris nunc congue. Justo laoreet sit amet cursus sit amet dictum. Vitae elementum curabitur vitae nunc. Non tellus orci ac auctor augue mauris augue. A iaculis at erat pellentesque adipiscing commodo elit. Sed vulputate
  odio ut enim blandit volutpat maecenas volutpat blandit. Blandit turpis cursus in hac. Enim diam vulputate ut pharetra sit amet aliquam id. Habitant morbi tristique senectus et netus et malesuada fames. Ac tincidunt vitae semper quis lectus nulla at.
  Risus pretium quam vulputate dignissim suspendisse. Viverra aliquet eget sit amet tellus cras adipiscing. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Sapien eget mi proin sed libero enim sed. Eu non diam phasellus vestibulum
  lorem sed risus. Nunc sed augue lacus viverra vitae congue eu consequat ac. Etiam erat velit scelerisque in dictum. Nec ultrices dui sapien eget mi. Euismod in pellentesque massa placerat duis ultricies. Auctor augue mauris augue neque gravida in fermentum.
  Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Enim neque volutpat ac tincidunt vitae semper quis. Faucibus scelerisque eleifend donec pretium vulputate. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Maecenas
  accumsan lacus vel facilisis volutpat est. Sed vulputate mi sit amet mauris commodo quis imperdiet. Consequat id porta nibh venenatis cras sed felis eget. Sed egestas egestas fringilla phasellus faucibus. Vel fringilla est ullamcorper eget nulla facilisi
  etiam dignissim. Ipsum faucibus vitae aliquet nec ullamcorper. Iaculis urna id volutpat lacus laoreet non. Tincidunt tortor aliquam nulla facilisi. Pellentesque habitant morbi tristique senectus. Pulvinar pellentesque habitant morbi tristique senectus
  et netus. Ultrices tincidunt arcu non sodales neque sodales ut etiam. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Enim diam vulputate ut pharetra sit amet. Blandit massa enim nec dui nunc mattis enim ut tellus. Morbi quis commodo odio
  aenean. Congue nisi vitae suscipit tellus mauris. Massa vitae tortor condimentum lacinia quis vel. Justo eget magna fermentum iaculis eu non. Commodo ullamcorper a lacus vestibulum sed arcu. Aliquam faucibus purus in massa tempor nec. Massa sed elementum
  tempus egestas sed sed. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. At in tellus integer feugiat. Urna nunc id cursus metus aliquam eleifend. Suspendisse ultrices gravida dictum fusce ut. Vestibulum morbi blandit cursus risus at ultrices
  mi tempus imperdiet. Vitae nunc sed velit dignissim sodales ut. Id cursus metus aliquam eleifend mi in. Amet purus gravida quis blandit turpis cursus in hac habitasse. Ut tellus elementum sagittis vitae et leo duis ut.
</div>