1

ヘッダーとなる画像があります。ここに私の単純なHTMLがあります:

<html>
  <body>
    <div class="wrapper" />
  </body>
</html>

ページの幅いっぱいに表示されますが、表示するには高さを指定する必要がありました。CSSは次のとおりです。

.wrapper {
  background-image: url(../assets/bridge.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 250px;
}

この画像をレスポンシブにするにはどうすればよいですか? 現在、ページを拡大すると、写真が認識できないところまで来ています。

4

2 に答える 2

0

これがどのように機能するか、またはどのように期待するかを慎重に考える必要があります。div に実際のコンテンツがないと、高さがゼロになるため、高さを設定する必要がありました。ただし、一般的には、高さを設定しないようにしてください。おそらく、これが「ラッパー」の場合、高さを設定しなくても開いたままにするコンテンツをラップします。

背景画像に関しては、それがどのように動作するかを考える必要があります。上部に沿ってストリップに表示したいだけですか？Mr Alien のソリューションを使用する場合は、画像がどんどん伸びて奇妙に見えることに注意してください。そのため、ここで何をしようとしているのかについて、さらに情報が必要です。

于 2013-05-03T11:27:18.007 に答える