如何实现html自适应

我想让这个图片的滑动自适应我的图片尺寸，应该怎么做
代码如下：

< img alt="" src="笔记/1.jpg" width=400 height=500/>

第一张

                                </p >
                            </div>
                        </div>
                        <div class="item">
                            < img alt="" src="笔记/2.jpg" align=center width=400 height=500/>
                            <div class="carousel-caption">
                                <h4>
                                    第二张
                                </h4>
                                <p>
                                    
                                </p >
                            </div>
                        </div>
                        <div class="item">
                            < img alt="" src="笔记/3.jpg" align=center width=400 height=500/>
                            <div class="carousel-caption">
                                <h4>
                                    第三张
                                </h4>
                        
                            </div>
                        </div>
                    </div> <a class="left carousel-control" href=" " data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a > <a class="right carousel-control" href="#carousel-993934" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a >
                </div>
            </div>
        </div>
    </div>
<audio autoplay='autoplay'>
 <source src="C:\Users\86136\Desktop\课设\img\imagin.mp3" type="audio/mpeg"><!-- ！BGM！-->
</audio>

把width跟height去了

< img alt="" src="笔记/1.jpg"/>

这样是适应父元素

< img alt="" src="笔记/1.jpg" style="width:100%;height:100%;" />

这样是本身元素高度

< img alt="" src="笔记/1.jpg" />

如果牵扯到你本身有css样式看是不是被父元素设置的样式冲突了？

- 如果要自适应屏幕
<img alt="" src="笔记/1.jpg" style="width:100%;height:100%;"/>
- 如果要图片本身大小
<img alt="" src="笔记/1.jpg"/>
- 如果要自定义大小
<img alt="" src="笔记/1.jpg" style="width:400px;height:300px"/>

<!-- 图片本身大小，无需设置宽高 -->
<img alt="" src="笔记/1.jpg"/>
<!-- 根据父元素填充满 -->
<img alt="" src="笔记/1.jpg" style="width:100%;height:100%;"/>
<!-- 等比例宽度最大根据父元素填充满 -->
<img alt="" src="笔记/1.jpg" style="width:100%;"/>
<!-- 等比例高度最大根据父元素填充满 -->
<img alt="" src="笔记/1.jpg" style="height:100%;"/>
<!-- 自定义大小，自定义宽高 -->
<img alt="" src="笔记/1.jpg" style="width:400px;height:500px"/>



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>
        <!-- 拉伸变形 -->
        <div style="width: 100px;height: 100px;border:1px solid #f00">
            <img style="width:100%;height:100%"
                src="https://marketplace.canva.cn/iDpHA/MAEwm0iDpHA/1/s2/canva-woman-standing-in-a-rapeseed-field-MAEwm0iDpHA.jpg"
                alt="">
        </div>
        --------------------------------------------------------------------------
        <!-- 保持比例 充满宽度 -->
        <div style="width: 100px;height: 100px;margin-bottom: 200px;border:1px solid #f00">
            <img style="width:100%;"
                src="https://marketplace.canva.cn/iDpHA/MAEwm0iDpHA/1/s2/canva-woman-standing-in-a-rapeseed-field-MAEwm0iDpHA.jpg"
                alt="">
        </div>


        --------------------------------------------------------------------------
        <!-- 保持比例 充满宽度 -->
        <div
            style="width: 100px;height: 100px;text-align:center;line-height: 100px;overflow: hidden;border:1px solid #f00">
            <img style="width:100%;"
                src="https://marketplace.canva.cn/iDpHA/MAEwm0iDpHA/1/s2/canva-woman-standing-in-a-rapeseed-field-MAEwm0iDpHA.jpg"
                alt="">
        </div>

    </div>
</body>

</html>


< img alt="" src="笔记/1.jpg" style="width:100%;height:100%;"/>

去图片的固定宽高，设置为100%，会自适应父节点的宽高

全部代码贴出来，
你这个只有一张图片，你要相对于哪个元素自适应呢？窗口？

要达到什么需求的

图片滑动，自适应宽度自适应显示器宽度
https://blog.csdn.net/iteye_19312/article/details/82603287