html中在div中加img然后使得img宽高适应div的宽高而不是显示img的实际宽高

在HTML中，如果你想让`<img>`元素的宽度和高度自动适应其包含的`<div>`元素，你可以通过CSS来实现响应式布局。通常的做法是利用CSS的`max-width`和`max-height`属性，以及`width`和`height`属性设置为`100%`。这样，当图片尺寸小于`<div>`时，它会按比例缩放；如果图片大于`<div>`，则不会超出`<div>`的边界。

示例代码：

<div class="container">
    <img src="your-image-source.jpg" alt="Image description" class="responsive-img">
</div>

.container {
    position: relative;
    display: flex; /* 如果你想让图片水平居中 */
    width: 100%;
    height: auto; /* 保持原始宽高比 */
}

.responsive-img {
    max-width: 100%; /* 图片最大宽度不超过div */
    max-height: 100%; /* 图片最大高度不超过div */
    object-fit: cover; /* 或者使用object-fit: contain; 控制是否拉伸填充容器 */
    width: auto; /* 自动调整以适应最大宽度 */
    height: auto;
}