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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3d16f-2c34a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3d16f-2c34a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?