Scaling div like an image

Question

I'm doing a list of items, but it has some challenges:

• Responsive;
• The "title" may have more than one line;
• Sometimes a I need to show a icon with a color in the background instead of full image.

This is the image of what I'd expect:

And what I've got: http://codepen.io/caio/pen/ygkfm/

As you can see, I can't set the same scaling to an "image" div when it has a icon. Is there any solution for my problem?

Answer 1

I am assuming your images (exept icons) all have the same aspect ratio as in your example.

In this case, you can use padding bottom to keep the height of the image container. As padding-bottom is calculated according to the width of the container, it will keep it's aspect ratio whatever the content (you will have to position the content with position:absolute; so it doesn't change the dimesions of the container).

Here is a demo Showing what you can do.sorry I'm not into codePen

I also added an other container to center the icons horizontaly.

* {
    -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;
}