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