Question

有人可以向我解释为什么没有应用最大宽度规则。我的图像是600px宽，当我有全宽（1920px）的浏览器窗口时，图像是955px。如果我将max-width规则从max-width：100％更改为max-width：600px，一切都按预期工作，图像的自然宽度不超过600px。图像应该是响应的。当浏览器改变大小时，图像缩放但不应超过自然宽度600px。为什么max-width：100％被宽度推翻？

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>HTML Test Ground</title>
            <style>
                body {
                    margin: 0;
                    padding: 0;
                }
                img {
                    display: block;
                    float: left;
                    margin-right: 10px;
                    width: calc( (100% - 10px) / 2 );
                    max-width: 100%;
                }
                img:last-of-type {
                    margin-right: 0;
                }
            </style>
        </head>
        <body>
            <img src="Images/warGamesSmall.jpg" alt="Do You Want To Play A Game?">
            <img src="Images/warGamesSmall.jpg" alt="Do You Want To Play A Game?">
    </body>
</html>

为什么css宽度规则会覆盖最大宽度规则？

0 个答案: