Max-width

最新推荐文章于 2025-03-05 19:31:48 发布

coderMozart

最新推荐文章于 2025-03-05 19:31:48 发布

阅读量554

点赞数

分类专栏： css 文章标签：图片

本文链接：https://blog.youkuaiyun.com/coderMozart/article/details/54407683

版权

css 专栏收录该内容

7 篇文章

订阅专栏

The element width is set to the value of min-width whenever min-width is larger than max-width or whenever min-width is larger than width . —-MDN
意思是说元素的width最终值是由min-width决定的

 1.给图片设置max-width后，当浏览器窗口小于max-width的时候不会出现横向的滚动条

 2.max-width的值会覆盖width的值当浏览器的窗口小于width值的时候，即使width的值设置在inline-class里

 例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<p>
    <b>缩小浏览器的窗口，img的width值是跟着窗口大小改变</b>
</p>
<img src="http://www.w3schools.com/css/img_chania.jpg" alt="Chania" style="width: 900px"/>  
</body>
</html>