html - 像图像一样缩放 div

Question

我正在做一个元素列表，但它有一些挑战:

• react 灵敏；
• “标题”可以不止一行；
• 有时我需要在背景中显示带有颜色的图标而不是完整图像。

这是我所期望的图像:

我得到的是:http://codepen.io/caio/pen/ygkfm/

如您所见，当“图像”div 有图标时，我无法为其设置相同的缩放比例。我的问题有解决方案吗？

Answer 1

我假设您的图像(图标除外)都具有与示例中相同的纵横比。

在这种情况下，您可以使用填充底部来保持图像容器的高度。由于 padding-bottom 是根据容器的宽度计算的，因此无论内容如何，​​它都会保持纵横比(您必须使用 position:absolute; 定位内容所以它不会改变容器的尺寸)。

这是一个 demo 显示您可以做什么。抱歉，我不喜欢 codePen

我还添加了另一个容器来使图标水平居中。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.items {
    margin: 50px auto 0;
    width: 90%;
    *zoom: 1;
}
.items:before, .items:after {
    content:" ";
    display: table;
}
.items:after {
    clear: both;
}
.items .item {
    border: 1px solid #ddd;
    float: left;
    width: 32%;
}
.items .item:nth-child(3n+2) {
    margin: 0 2%;
}
.items .item .image {
    background: #eee;
    padding-bottom:50%;
    position:relative;
}
.items .item .image .img_in{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}
.items .item .image img {
    display: block;
    width: 100%;
    height:100%;
}
.items .item .image img.icon {
    height: 80%;
    margin:0 auto;
    position: relative;
    top: 10%;
    width: auto;
}
.items .item .title {
    margin: 0;
    padding: 20px;
}