css - 画像要素を含む div を画像と同じ高さにする方法

Question

私はこのhtmlコードを持っています:

<div>
    <img src="http://placehold.it/319x300" alt="">
<div>

そしてこのCSS：

*{margin: 0; padding: 0;}
div{
    background: red;
    width: 319px;
    height: auto;
}
img{
    width: 100%;
    height: auto;
}

divただし、下部にあるショーの背景色。コンテナを画像と同じ高さにする方法はありますか? 私が取り組んでいるサイトでは、Erics Reset スタイルがあり、これと競合するものはありpaddingません。marginこれはサンプルコードですhttp://jsfiddle.net/ESmZW/1/ ありがとう

Answer 1

vertical-align:top簡単な方法は、プロパティを画像に追加することです

img{
    width: 100%;
    height: auto;
    vertical-align:top;
}

jsFiddle の例

このjsFiddle exampleのように、画像を左にフロートさせ、overflow:auto ルールを div に追加することもできます。

Answer 2

@aurel divを画像のサイズにしたいだけなら、高さと幅を画像のサイズに設定してみませんか？HTML も div を閉じません。jsfiddleで私の変更を参照してください。

<div>
    <img src="http://placehold.it/319x300" width="319" height="300" alt="">
</div>

body {
    margin:0;
}


div {
    background: red;
    width: 319px;
    height: 300px;
}

Answer 3

画像に「display:block」を設定します。

img {
    width: 100%;
    height: auto;
    display: block;
}

Answer 4

絶対/相対ポジショニングを使用できます：

*{margin: 0; padding: 0;}
div{
    position:relative;
    background: red;
    width: 319px;
    height: auto;
}
img{
    position:absolute;
    width: 100%;
    height: auto;
}