これは 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サイズなど)、問題が始まります。画像は(私が望むように)縮小しますが、それでも高さは残り170px
hgroup
、画像とコンテンツの間に大きなギャップが残ります
使用しようとしましheight: 100%
たが、まったく機能しません (この場合は少なくとも)。
デモが必要な場合http://jsfiddle.net/Jcp6H/