CSS - 如何使图像容器宽度固定,高度自动拉伸

Question

我去了一些像这样的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.那可能吗？

Answer 1

你要找的是min-height和max-height.

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

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