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

-1

有人可以帮我弄清楚为什么我的徽标图片没有根据浏览器大小调整大小吗？使用响应式布局调整图片大小

---------------- 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>

来源

2013-02-12 MG1

原因是，你已经给max-width ，可能会比原来的width少。所以给width将解决你的问题。

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

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

如果你觉得你的形象不是SOOOO大，它占据屏幕的整个宽度，给较小的宽度父，说25%。以及100%的图片width。所以父母会根据屏幕的宽度进行调整，您的图片也是如此。 :)

来源

2013-02-12 16:39:27

当我将宽度设置为100％时，它会在整个窗口上展开徽标。 – MG1 2013-02-12 16:41:51

@ MG1查看已更新的答案。希望有所帮助。 :) – 2013-02-12 16:43:40

我为你创建了一个jsFiddle来展示@Praveen Kumar解释：http://jsfiddle.net/persianturtle/4h2xU/1/ – 2013-02-12 16:53:46

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

回答

相关问题