像图像一样缩放div

Question

我正在做一个项目列表,但它有一些挑战:

• 响应;
• "标题"可能有多行;
• 有时我需要在背景中显示带有颜色的图标而不是完整图像.

这是我所期待的形象:

我得到了什么:http://codepen.io/caio/pen/ygkfm/

如您所见,div当有图标时,我无法将相同的缩放设置为"图像" .我的问题有什么解决方案吗？

Answer 1

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

在这种情况下,您可以使用填充底部来保持图像容器的高度.由于padding-bottom根据容器的宽度计算出的时,将保持它的高宽比的任何内容(你将不得不与内容定位position:absolute;,因此不会改变容器的dimesions).

这是一个演示 展示你可以做什么.对不起,我没有进入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;
}