CSS 让图像撑开一个div

在本文中，我们将介绍如何使用CSS让图像撑开一个div。有时候，在网页设计中，我们希望图像能够完全填充一个div，而不会出现不完整或者裁剪的情况。这可以通过设置css属性和使用一些技巧来实现。

阅读更多：CSS 教程

使用background-size属性

一个简单的方法是使用background-size属性。这个属性可以控制背景图片的尺寸，使其能够完全填充一个div。具体使用方法如下：

.div-with-image {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

在上述代码中，我们给一个名为div-with-image的div设置了一个背景图片，并且设置了background-size属性为cover。这样可以保证图像在div中完全填充，并且不会变形。

设置div为相对定位

除了使用background-size属性，我们还可以通过设置div为相对定位来实现图像撑开div的效果。具体使用方法如下：

.div-with-image {
  position: relative;
  width: 100%;
  height: auto;
}

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

在上述代码中，我们首先将div的宽度设置为100%以确保其能够完全填充其父元素。然后，我们将div的高度设置为auto，这样它就会根据图像的比例自动调整高度。接下来，我们给图片设置了绝对定位，并将其宽度和高度都设置为100%。最后，我们使用object-fit属性设置图片的缩放方式为cover，这样可以防止图片变形。

使用padding属性

通过使用padding属性，我们也可以实现图像撑开div的效果。具体使用方法如下：

.div-with-image {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
}

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

在上述代码中，我们将div的宽度设置为100%，然后将其高度设置为0，并使用padding-bottom属性来为div创建一个占位符。通过设置padding-bottom为50%，我们可以确保div的高度是宽度的一半。然后，我们将图片设置为绝对定位，并将其宽度和高度都设置为100%。最后，我们同样使用object-fit属性保持图像的比例。