0

何らかの奇妙な理由で、レスポンシブ レイアウトにレスポンシブ イメージを追加したところ、イメージの下にある種のスペースが追加されたようです。

ここで問題を確認できます: http://www.client.noxinnovations.com/jensenblair/

トップ画像です。これが私のHTMLとCSSです。

HTML

<div class="header"> <img src="images/photograph.jpg" /> </div>

CSS

img {
    max-width: 100%;
    height: auto !important;
}
.header {
    height: auto;   
    padding: 0;
    margin: 0 auto;
    border: none;
}

各ブラウザで一貫しているようです。アイデアはありますか？

4

1 に答える 1

1

これを解決するには、(私が知っている) 2 つの方法があります: http://jsfiddle.net/3kC4K/1/

<div>
    <img src="http://placehold.it/100x100/"/>
</div>

<div>
    <img src="http://placehold.it/100x100/" class="block"/>
</div>

<div>
    <img src="http://placehold.it/100x100/" class="inline"/>
</div>

CSS

div{
    border:solid 1px #f00;
    margin:5px;
    float:left;
}

.block{
    display:block; 
}

.inline{
    vertical-align:bottom;
}​

imgタグは、デフォルトではinline要素です。このため、ブラウザはその下に一種の「ガター」を作成し、その下に折り返されたテキストが画像の下部と同一面にならないようにします。

あなたの場合、display:block画像に適用するだけでうまくいくはずです。

于 2012-09-20T19:26:46.100 に答える