Question

我尝试了以下解决方案：

<div class="item">
    <img src="http://2.bp.blogspot.com/-nXak3-M8QG4/ULtEsnBI0RI/AAAAAAAAAOA/7uEYy1oExZc/s1600/black-desktop-computer.jpg"/>
 </div>

这里是css：

img {
    width:120px;
    height: auto;
}

.item {
    border:1px solid pink;
    width: 120px;
    height: auto;
    margin: 3px;
    padding: 3px;
    background-color: red;
}

请查看此fiddle以查看输出。

还有一个额外的底部空间。我想删除那个额外的空间。我试过很多组合但没有成功。

任何其他解决方案都是首选。请帮忙。

Answer 1

如果我理解正确，这里是another solution 通过使用对象适合属性

Answer 2

试试这个：

 img {
        width:120px;
        height: 100%;
        display: table-cell;
    }

    .item {
        border:1px solid pink;
        width: 120px;
        height: 100px;
      display: table;
        margin: 3px;
        padding: 3px;
        background-color: red;
    }

请告诉我这是不是你的意思。

Answer 3

此空间适用于descenders，您可以看到它，因为图像以文本形式排列。只需添加display: block;或vertical-align: bottom;即可使其消失。

CSS - 使图像的高度在固定高度的容器内自动拉伸

3 个答案: