CSS将img图片填满父容器div并自适应容器大小

要让图片填满父容器div，我们首先需要设置div的宽度和高度，然后对图片进行相应的样式设置。下面是一种常见的方法：

    div {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  

上述代码中，我们将父容器div设置为100%宽度和高度，使用display: flex和align-items: center; justify-content: center;实现居中显示。然后对img标签设置了max-width: 100%和max-height: 100%，确保图片在不失真的情况下填满父容器。最后，使用object-fit: cover;将图片等比例缩放并裁剪以填满父容器。

要让图片自适应容器大小，可以使用CSS中的CSS3属性object-fit和object-position。下面是一种常见的方法：

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

上述代码中，我们将img标签的宽度和高度设置为100%。然后使用object-fit: contain;将图片等比例缩放以适应父容器，并保持图片本身的宽高比。object-position: center;则将图片在容器中居中显示。

下面是一个实际应用的示例，将图片填满父容器，并使其自适应容器大小：

    <div id="container">
      <img src="example.jpg" alt="Example Image">
    </div>
    
    #container {
      width: 500px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  

上述代码中，我们创建了一个id为"container"的div，并设置了其宽度为500px，高度为300px。然后我们在该div中插入了一个img标签，并设置了其src属性和alt属性。通过CSS样式设置，我们将父容器div设置为居中显示，并且将img标签设置为填满父容器并裁剪显示。

通过上述方法，我们可以轻松地实现将图片填满父容器div并自适应容器大小的效果。这在设计响应式的网页布局或者制作图片幻灯片等场景中非常实用。希望本文能够对你理解和运用CSS中的图片填充和自适应容器大小的方法有所帮助。