web前端关于img元素设置百分比宽度的问题

问题遇到的现象和发生背景
<!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>
        li {
            display: inline-block;
            width: 500px;
        }

        img {
            /* 图片原始的尺寸是70*40 */
            /* 这里设置其宽度为100% */
            width: 100%;
        }

        div.img {
             /* 图片外层的div不设置左浮动时，图片宽度撑满li，为500px。
            但是当图片外层的div设置左浮动时，图片宽度保持原始尺寸不变，为70*40 */
            float: left;
        }
    </style>

</head>

<body>
        <ul>
            <li>
                <div class="img">
                    <a href=""><img src="../素材/test.jpg" alt=""></a>
                </div>
            </li>
        </ul>
</body>

</html>
我最初的疑问

如上面描述，我对于图片设置百分比宽度理解不够深刻，这里我给图片设置 width: 100%究竟是相对于其父元素a，还是向上寻找直到找到有设置宽度的祖先元素并用其宽度*100%？

根据测试现象的思考

可以看到，我没有设置div浮动时，图片从原始的70乘40变成了100%的500px，也就是向上寻找到了设置宽度的li。
但是设置div浮动后,图片没有变化，保持原始70乘40，我可以理解div变成了和a一样的内容自适应，但是li依然是设置了宽度的块盒啊，为何图片不继续向上寻找宽度呢？

img 设置 width: 100%是相对于其向上寻找第一个块元素的宽度,也就是相对于<div class="img">的宽度,
当没有设置div浮动时, div的宽度默认是最大化(就相当于宽度100%), 也就是div的宽度等于li的宽度500px,
img 的 width: 100% 是参照div的宽度,也是500px
但是设置div浮动后, div的宽度会变成默认最小化(就是div的宽度等于其div中内容的宽度), 也就是div的宽度等于的img宽度70px,
img 的 width: 100% 是参照div的宽度,还是70px,也就没变化

主要是div宽度的变化, img宽度是参照div的宽度,img宽度与li的宽度没有直接关系
参考下边例子

<!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>
        li {
            display: inline-block;
            width: 500px;
            border: 1px solid #999;
        }
        div#id1 {
            background-color: #f99;
        }
        div#id2 {
            float: left;
            background-color: #99f;
        }
    </style>
 
</head>
 
<body>
        <ul>
            <li>
                <div id="id1">没有设置浮动</div>
                <div id="id2">设置了浮动</div>
            </li>
        </ul>
</body>
 
</html>

img

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

div自适应了li标签，li设置了500px 所以img的百分之百也只能是500px