html - 图像不随窗口大小动态调整大小

Question

我想要一个大小为 250x50px 的图像根据窗口大小调整自身大小(变小)，换句话说，使其响应。

#wrapper 包含整个页面的内容。 #header 包含图像和导航栏。

我知道使用 @media screen 可能会更容易，但我正在寻找一种纯 CSS 方法。

这是我目前使用的:

HTML:

    <div id="wrapper">
         <div id="header"> 
             <div style="max-width:500px;">
                 <img id="logo" src="images/logo.jpg" alt="logo" href="#"> 
         </div>
    </div>

CSS:

#wrapper{
    width: 100%;
    height: auto;
}

#header{
    height: 100px;
    min-width: 300px;
    border-bottom: 1px solid black;
}
#logo{
    float: left;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Answer 1

你的代码有几个问题，

• 不要使用内联样式，
• 将border-bottom放在#header的子div中
• 不需要 IE hack
• 这里不需要 min-width。

注意:我不明白为什么你需要把这张图片变小，让我们看看它的 250x50，当下面的屏幕是 320px 所以已经很合适了

这是一个片段

#wrapper {
  width: 100%;
  border: dashed red 1px
}
#header > div {
  max-width: 500px;
  border-bottom: 1px solid black;
}
#logo {
  max-width: 100%;
  height: auto;
  display: block
}

<div id="wrapper">
  <div id="header">
    <div>
      <img id="logo" src="//placehold.it/250x50" alt="logo" />
    </div>
  </div>
</div>