css - 附加图像时div高度过度拉伸

Question

我遇到了嵌套 div 及其高度的问题。

我想要完成的是图像的父级高度拉伸以适合图像。发生的事情是父母过度拉伸并且高度大于图像。

你可以在这里检查代码：http: //jsfiddle.net/83Ke6/

HTML

<div class="select_box">
    <div class="selected">
        <img src="http://awardwallet.com/images/fbSmallLogo.png" />
    </div>
</div>

CSS

.select_box {
    display:inline-block;
    height:50px;
    border:1px solid blue;
}
.selected {
    border:1px solid gray;
}
img {
    border:1px solid red;
}

所以在这种情况下，.selected 应该等于 img 高度，但是它高 5px；谢谢您的帮助

Answer 1

默认情况下，img 是一个内联元素，因此在段落中的行下保留一个空格。添加display: block;到图像以删除间距。

小提琴：http: //jsfiddle.net/83Ke6/3/

Answer 2

.select_box {
    display:inline-block;
    height:auto;
    border:1px solid blue;
    line-height:0px;
}
.selected {
    border:1px solid gray;
    height:auto;
}
img {
    border:1px solid red;
}

通过设置自动；height 和 0px 的 line-height;，您的 div 将根据其内部内容进行调整。结果是这样的：http: //jsfiddle.net/wz45k/