Responsive square images

Responsive 3x3 grid of square images. 3 Columns and 3 rows.

by web tiki

HTML

<!-- 1st row verticaly centered text in the square columns -->

<div class="square">
    <div class="content">
        responsive squares with content . Not centered yet!
    </div>
</div>
<div class="square">
    <div class="content numbers">
        98%
    </div>
</div>
<div class="square">
    <div class="content numbers">              
        3.9/5
    </div>
</div>

<!-- 2nd row verticaly centered images in square columns -->

<div class="square">
    <div class="content">
        <img class="rs" src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg"/>
        Responsive image.
    </div>
</div>
<div class="square">
    <div class="content">
        <img class="rs" src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg"/>
        Responsive image.
    </div>
</div>
<div class="square">
   <div class="content">
       <img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg"/>
       Responsive image.
    </div>
</div>

<!-- 3rd row responsive images in background with centered content -->

<div class="square bg img1">
   <div class="content">
        Centered responsive images as background with content over it.
    </div>
</div>
<div class="square bg img2">
    <div class="content">
        Again
    </div>
</div>
<div class="square bg img3">
    <div class="content">
        And again
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);  /* <-- Just for the demo, Yes I like pretty fonts... */

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
    
}

/*  For responsive images */

.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}
/*  For responsive images as background */

.bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    color:#fff;
}

.img1{
    background-image: url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
.img2{
    background-image: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
}
.img3{
    background-image: url('https://farm4.staticflickr.com/3794/13893055574_3df0ab636b.jpg');
}

/*  following just for the demo */


body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    background:#ECECEC;
}

.numbers{
    font-weight:900;
    font-size:100px;
}