Question

有人可以帮我弄清楚为什么我的徽标图片没有根据浏览器大小调整大小？

---------------- CSS ---------------------

body {
       height: 100%;
       background-color:#333;
}
#logo {
      max-width: 100%;
}
img {
     border: 0;
     max-width: 100%;
     height: auto;

}
#header-bg {
    background-image: url("header-bg.png");
    overflow: auto;
    width: 100%;
}

---------------- HTML -------------------

 <body>
    <div id="header-bg">
    <div id="logo">
        <img src="logo.png" /> 
    </div>
   </div>
</body>

Answer 1

原因是，您提供的max-width可能小于原始width。因此，提供width将解决您的问题。

img {
     border: 0;
     width: 100%;
     height: auto;
}

除此之外，一切都是正确的。

如果你认为你的图像不是那么大，它占据了整个屏幕的宽度，那么给父母一个较小的宽度，比如说25%。对于width 100%的{{1}}图像。因此父母会根据屏幕的宽度进行调整，因此您的图像也是如此。 :)

使用响应式布局调整图像大小

1 个答案: