html img 填充父DIV

在HTML中，如果你想要将图片(`<img>`)完全填充其父级`<div>`，可以采用几种方法：

1. **设置宽度和高度**:
将`<img>`标签的`width`和`height`属性设为100%，让图片自动适应其容器的高度。同时，你可以通过给父`<div>`设置一个固定的`max-width`和`max-height`来限制图片的最大尺寸。

<div style="position:relative; max-width:100%; max-height:100%; overflow:hidden;">
    <img src="your-image-source" width="100%" height="100%">
</div>

2. **使用display:block或inline-block**:
确保`<img>`元素有块级布局，这会使其成为独立占据空间的元素。将`<img>`的`display`属性设置为`block`或`inline-block`。

<img src="your-image-source" alt="..." display="block">

3. **使用object-fit属性**:
HTML5引入了`object-fit`属性，它可以控制图片在容器内的显示方式。如设置为`cover`会让图片覆盖整个容器并保持原始宽高比。

<div style="position:relative; display:inline-block;">
    <img src="your-image-source" alt="..." object-fit="cover">
</div>

4. **使用CSS背景图像**:
作为另一种方法，可以给父`<div>`设置一个背景图像，并将其大小设置为`contain`或`cover`。

.parent-div {
    background-image: url('your-image-source');
    background-size: cover;
}

.parent-div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上每种方法都旨在使图片与其父`<div>`保持一致的填充，确保视觉上看起来像是完全填充的。