css将图片在div中自适应

CSS是我们网页制作中非常重要的元素，其中包括了许多我们可以使用的方法和功能，其中之一就是可以让图片在div中自适应。下面我来介绍一下具体怎么实现。

    .img-container {
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 图片比例，如果不是16：9，可以自己设置 */
        position: relative;
    }

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

首先，我们需要一个外层的div来容纳我们的图片，它的宽度设置为100%。由于我们的图片是需要自适应的，所以我们需要设置padding-bottom的值来让div的高度跟着宽度自适应。而这个值也是根据图片的比例来决定的。例如，如果图片是16：9，那么这个值就应该是宽度除以高度（9/16）的结果，也就是56.25%。

然后，我们再把图片的宽度和高度都设置为100%，并把它们设置为绝对定位。这样就可以让图片充满整个div，并且可以根据div的宽度自适应高度。

    <div class="img-container">
        <img src="image.jpg" alt="">
    </div>

最后，我们只需要在HTML中把图片放在这个div里面就行了，我们也可以通过修改img标签的class名字来调整图片大小和位置。