CSS 如何在保持比例的同时用图片填充一个 div

在本文中，我们将介绍如何使用 CSS 在保持比例的同时，用图片填充一个 div。

阅读更多：CSS 教程

方案一：使用 background-size 属性

我们可以使用 CSS 的 background-size 属性来实现在保持比例的情况下填充一个 div。通过设置 background-size 为 cover，可以让背景图像铺满整个 div，并且保持比例。

.div {
  background-image: url("image.jpg");
  background-size: cover;
}

上面的代码中，我们设置了一个背景图像，并将 background-size 属性设置为 cover。这将使背景图像以最佳方式填充 div，并保持其原始比例。

方案二：使用 object-fit 属性

除了使用 background-size 属性之外，我们还可以使用 CSS 的 object-fit 属性来实现在保持比例的情况下填充一个 div。通过将 object-fit 设置为 contain，可以使图像按比例缩放以适应 div。

.div {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

上面的代码中，我们创建了一个 div，并设置了 flex 布局、溢出隐藏和居中对齐的样式。然后，我们在 div 中放置了一个 img 元素，并将 object-fit 属性设置为 contain。这将使图像按比例缩放以适应整个 div。

方案三：使用 padding 和 position

除了上述两种方法之外，我们还可以使用 padding 和 position 属性来填充一个 div，并保持比例。首先，我们设置 div 的相对定位，并使用 padding-top 属性来保持比例。

.div {
  position: relative;
  padding-top: 75%; /* 保持 4:3 比例的宽高比，可根据需要进行调整 */
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

上面的代码中，我们将 div 的 position 属性设置为 relative，并使用 padding-top 来设置 div 的高度。通过设置 padding-top 为一个百分比值，可以保持 div 的宽高比例。然后，我们在 div 中放置了一个 img 元素，并将其 position 属性设置为 absolute，宽度和高度都设置为 100%。这将使图像按比例缩放以填满整个 div。

总结

本文介绍了三种方法来实现在保持比例的情况下，用图片填充一个 div。通过使用 CSS 的 background-size 属性、object-fit 属性和 padding 和 position 属性，我们可以轻松地实现这一效果。根据具体需要，可以选择适合的方法来达到最佳效果。无论是在构建网页布局还是在设计响应式网页时，这些技巧都将帮助我们更好地处理图片填充 div 的问题。