Question

我希望大小为250x50像素的图像根据窗口大小自行调整大小（更小），换句话说，让它响应。

void displayDodge(){ int nbTiles = (160 * 144) / 8; int i,j; SPRITES_8x8; j = 0; set_sprite_data(0, nbTiles, gbpic_dat); for (i=0; i+=8; i<=nbTiles){ set_sprite_tile(j, j); move_sprite(j, i, 75); j++; }; SHOW_SPRITES; }保存整个页面的内容。 #wrapper保存图像和导航栏。

我知道使用#header可能会更容易，但我正在寻找纯CSS方法。

以下是我目前正在使用的内容：

HTML ：

@media screen

CSS ：

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

Answer 1

您的代码中存在一些问题，

不要使用内联样式，
将border-bottom放入div

#header

不需要IE hacks
这里不需要min-width。

注意：我不明白为什么你需要让这张图片变得更小，让我们看看它250x50，当下方的屏幕为320px时已经如此非常适合

这是一个片段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，使用@media屏幕是一种CSS方法。但是如果你不想要那个，你可以只用em或％之类的相对单位来给出最小宽度：

#logo {
  width: 20%;
  min-width: 100px;
}

事情是，你已经通过将标题设置为最小宽度300px并将div设置为最大宽度500px来设置一些限制，所以如果你想要更灵活地使用它们，也可以考虑不同的单位。

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

2 个答案: