子级图片如何自适应_css子图片随父图片高度缩小而缩小-CSDN博客

本文链接：https://blog.csdn.net/TERMINUSL/article/details/125930246

我遇到的问题是父级的盒子本身没有设置宽高，但是子级有图片和文字介绍，想要让子级中的图片随着浏览器窗口的改变自适应。子级的图片不适用背景图片解决，子级图片是一个<img>标签。并且不想给子级图片设置宽高。

后来找到两种解决方法：

一种还是CSS样式，其实简单来说，给图片设置一个合适的高度就行，这样图片其实会在浏览器窗口缩放时自动调整图片的大小。

二是通过JS解决这个问题。

主要思路就是先获取到父级元素和子级img元素，然后通过offsetWidth和offsetHeight得到父级盒子的宽度和高度，之后让子级img的宽高等于父级宽高的百分比，这样图片就会随着父级的改变而改变。

<body>
    <div class="box">
        <img src="图片链接" alt="">
        <p>介绍文字</p>
    </div>
</body>
<script>
    var box=document.querySelector('.box')
    var picture=document.querySelector('img');
    console.log(box.offsetWidth);
    console.log(box.offsetHeight);
    picture.width=box.offsetWidth;
    picture.height=box.offsetHeight*合适的百分比
</script>