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

有两种方法（我知道）可以解决这个问题：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 回答