如何让img高度占满父容器

为了让`<img>`元素的高度完全占据其父容器，你需要确保图片的高度是自适应的，并且不会受到其他内容的影响。有以下几种常见做法：

1. **百分比高度**:
如果父容器有明确的高度，可以给`<img>`设置`height: 100%;`。例如，如果父容器是`height: 300px;`，图片将是300像素高。

   <div class="parent" style="height: 300px;">
     <img src="..." alt="" style="height: 100%; object-fit: cover;"> <!-- object-fit: cover; 可选，保持原始比例填充 -->
   </div>

2. **使用CSS视口单位** (`vw`):
将图片高度设置为其父容器宽度的百分比，这样随着浏览器窗口大小的变化，图片会自动调整到充满整个容器高度。

   <img src="..." alt="" style="height: 100vw;">

3. **固定宽度，自适应高度** (使用`max-height`):
如果你希望图片在宽度不变的情况下填充满高度，可以使用`max-height: 100%;`和`width: auto;`:

   <img src="..." alt="" style="max-height: 100%; width: auto;">

这里假设图片的宽度已知并且不需要缩放。

4. **使用CSS Grid 或 Flexbox**:
当父容器采用这两种布局时，配合上述百分比或视口单位，也可以轻松实现自适应高度。

记住，有时候为了保持图片质量，还可以添加`object-fit` 属性，比如 `object-fit: cover;` 来保证图像按比例缩放填充容器。