1

これは 5 月の html マークアップです

<header>
   <span> <!-- background image here -->  </span>
  <hgroup>
     <h1 class="testing">CSS3 and Compass Documentation</h1>
     <h2>here I am going to document my compass and CSS3 learning</h2>
  </hgroup>
</header>​

そして、これは私のcssのマートになります:

header span {
    background: url(banner.gif) center 0 no-repeat;
    background-size: 100% auto;
    display: block;
    height: 170px;  /* maybe this is where it needs changing*/
    width: 100%; 
}

ブラウザウィンドウを小さくし始めると（iPhoneサイズなど）、問題が始まります。画像は（私が望むように）縮小しますが、それでも高さは残り170pxhgroup、画像とコンテンツの間に大きなギャップが残ります

使用しようとしましheight: 100%たが、まったく機能しません (この場合は少なくとも)。

デモが必要な場合http://jsfiddle.net/Jcp6H/

4

2 に答える 2

0

この場合、<span>（背景）画像の高さに合わせて要素のサイズを変更する必要があります。

<img>背景画像の代わりにタグを使用することをお勧めします。

<header>
    <img src="http://movethewebforward.org/css/img/beanie-webasaurs.gif" alt="Webasaurs!" />
    <hgroup>
        <h1 class="testing">CSS3 and Compass Documentation</h1>
        <h2>here I am going to document my compass and CSS3 learning</h2>
    </hgroup>
</header>​

CSSスタイルで画像を次のようにスタイル設定します。

header {
  max-width: 950px; 
}

header img{
    display: block;
    width: 100%;
}

  header h1 {
    color: #324a69;
    font-size: 3em;
    text-align: center;
    text-shadow: 1px 1px 0 white;
    position: relative; 
}

  header h2 {
    clear: both;
    color: #705635;
    text-shadow: 1px 1px 0 white;
    font-size: 2em;
    text-align: center; 
}​

背景画像に基づいて要素の高さのサイズを設定するのは非常に困難です...

于 2012-06-08T10:28:44.687 に答える
0

最初に、スパン内で画像を使用すると、作業が簡単になります。

 <span><img src="banner.jpg" /></span>

必要なものに置き換えることができる例としてこれを試しました

header span img {
background: #960;
display: block;
max-height: 170px;
max-width:950px;
width: 100%;
height:100%;

}

max-height と max-width を設定するだけで、余分なスペースを追加せずにブラウザーで縮小されます。必要に応じて、min-height などを設定して、小さくなりすぎないようにすることもできます。

試してみて、それがうまくいくかどうかを確認してください。

于 2012-06-08T14:42:21.327 に答える