html – CSS – 如何使图像容器宽度固定和高度自动拉伸

发布时间：2020-12-14 19:30:50 所属栏目：资源来源：网络整理

导读：我已经去了一些这样的html代码： div class="item" img src="..." /div 和css代码如下： img { max-width: 100%; height: auto;}.item { width: 120px; height: 120px; height: auto; float: left; margin: 3px; padding: 3px;} 我想做的是使用div的宽度来展

我已经去了一些这样的html代码：

<div class="item">
    <img src="...">
 </div>

和css代码如下：

img {
    max-width: 100%;
    height: auto;
}

.item {
    width: 120px;
    height: 120px;
    height: auto;
    float: left;
    margin: 3px;
    padding: 3px;
}

我想做的是使用div的宽度来展现img并展开它的高度.我也希望div伸展本身适合img.那可能吗？

解决方法

你想要的是最小高度和最大高度.

img {
    max-width: 100%;
    height: auto;
}

.item {
    width: 120px;
    min-height: 120px;
    max-height: auto;
    float: left;
    margin: 3px;
    padding: 3px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!