tableau d''images responsive
html - August 25, 2015 - 21:27
affiche un tableau d''images centrées et responsive
<html>
<head>
<meta charset="UTF-8" />
<title>pictures array</title>
<style>
body{
margin:0;
padding:0;
}
#container{
display:flex;
justify-content: center;
width:100%;
max-width:1200px;
margin:auto;
}
ul{
list-style:none outside none;
margin:0;
padding:0;
}
li{
float:left;
position:relative;
overflow:hidden;
margin:0;
padding:0;
height:0px;
width:25%;
padding-bottom:16.67%;
}
li img{
width:100%;
height:auto;
}
@media (max-width:768px){
li{
width:50%;
padding-bottom:33.33%;
}
}
@media (max-width:480px){
li{
width:100%;
padding-bottom:66.67%;
}
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#"><img src="img01.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img02.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img03.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img04.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img05.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img06.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img07.jpg" width="300" height="200" alt="img description"></a></li>
<li><a href="#"><img src="img08.jpg" width="300" height="200" alt="img description"></a></li>
</ul>
</div>
</body>
</html>
