画像の高さが100％に設定されている場合のスクロールバー/オーバーフローの問題

Question

画像をブラウザウィンドウの高さの100％にしようとしています。私は以下のコードを使用して成功しました。ただし、スクロールバーを使用すると、ページを画像の下に約2ピクセル下にスクロールできます。これはマージンの問題ですか？私はスクロールバーがまったく表示されないようにしたいが、イメージがページの最下部に触れるようにしたい。

HTML：

<div class="container"> 
    <div class="artwork"> 
     <img src="images/picture1.jpg"> 
    </div> 
</div> 

CSS：

* { margin: 0; } 

body, html, .container { 
    height: 100%; 
} 

.artwork img { 
    height: 100%; 
} 

Answer 1

問題は、デフォルトで画像が垂直のベースラインに揃えているという事実です。テキストの隣に画像を置くと、これを見ることができます。画像はテキストのベースラインに、g、yなどの文字はベースラインの下に移動します。あなたが得ているスペースは、文字が下に行くベースラインの下のスペースです。 vertical-alignをtopに変更すると、スペースは消えます。 `.artwork img`にblock`：

http://jsfiddle.net/YJZRE/

.artwork img { 
    height: 100%; 
    vertical-align: top; 
}