CSS将img图片填满父容器div自适应容器大小的实现方法

下面我将详细讲解一下如何使用CSS将img图片填满父容器div实现自适应容器大小的方法，敬请听我讲解。

一、使用CSS background属性将图片作为背景填充

使用 background 属性将父容器背景设置为要显示的图片，这样就可以填满整个父容器了。并且使用 background-size 属性控制背景图片缩放。

示例1：使用CSS填充父容器背景

.container {
  background: url('your-image-url.jpg') no-repeat center center;
  background-size: cover;
}

在这个例子中，只需将.container 类的 background 属性设置为要显示的图片，背景图片各方向居中，相对于容器持平，然后设置 background-size 为 cover，以使背景图片完全填充整个父容器，即可轻松实现。

二、CSS设置img图片的宽高

即使上面的方法很简单，但在某些情况下，使用CSS background 属性无法满足要求，如需要使用 img 标签显示图片等。在这种情况下，可以使用CSS设置要显示的图片的宽度和高度，以便让其完全覆盖父容器。

示例2：使用CSS设置img图片的宽高

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 60%; /* 设置高度为容器宽度的60% */
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 兼容性不是很好，不过可以使用 */
}

如上面的代码所示，首先要设置 .container 类的宽度为 100%，同时设置 height 为 0，然后设置 padding-bottom 为 60%，这样就会使容器的高度自适应父级容器的宽度，并设置高度为宽度的 60%，保持宽高比例。接着，为 img 标签设置 position 属性为 absolute，并设置 top 和 left 为 0，使其占据整个父容器，同时设置宽度和高度为 100%，以使图片填充整个父容器，并通过 object-fit 属性设置图片缩放的模式。