What does it mean to use width:100%;height:auto; in combination?


< html >

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            width: 100%;
            height: auto !important;
        }
    </style>
</head>
<body>
    <img src="images/common/1/1.jpg" style="">
    <!--img width:100%;height: auto;-->
</body>
<script type="text/javascript">
    
</script>

< / html >
the img tag width:100%;height: auto; picture here will automatically expand and fill the screen. Why?

Jul.27,2021
The parent of
img is body, body by default. When the width of img is 100%, that is, the width of body is wide and the height is auto , the picture adapts with the width.

Menu