<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.box {
float: left;
position: relative;
width: 20%;
padding-bottom: 20%;
}
.boxInner {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 100%
}
@media only screen and (max-width:480px) {
.box {
width: 100%;
padding-bottom: 100%;
}
}
@media only screen and (max-width:650px) and (min-width:481px) {
.box {
width: 50%;
padding-bottom: 50%;
}
}
@media only screen and (max-width:1050px) and (min-width:651px) {
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
@media only screen and (max-width:1290px) and (min-width:1051px) {
.box {
width: 25%;
padding-bottom: 25%;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" />
<div class="titleBox">
Butterfly
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
<div class="titleBox">
An old greenhouse
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
<div class="titleBox">
Purple wildflowers
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
<div class="titleBox">
A birdfeeder
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
<div class="titleBox">
Crocus close-up
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
<div class="titleBox">
The garden shop
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
<div class="titleBox">
Spring daffodils
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
<div class="titleBox">
Iris along the path
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
<div class="titleBox">
The garden blueprint
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
<div class="titleBox">
The patio
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
<div class="titleBox">
Bumble bee collecting nectar
</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img
src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
<div class="titleBox">
Winding garden path
</div>
</div>
</div>
</div>
</body>
</html>