Comment rendre les images responsive avec FLEXBOX “PC, Phone etc” (HTML/CSS) – En Bambara
Le code source:
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images responsive</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="contenu">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
</body>
</html>
CSS:
.contenu{
width: 100%;
height: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.img1{
width: 300px;
height:150px;
background: yellow;
margin: 6px;
background-image: url(1.jpg);
background-size: cover;
}
.img2{
width: 300px;
height:150px;
background: yellow;
margin: 6px;
background-image: url(2.jpg);
background-size: cover;
}
.img3{
width: 300px;
height:150px;
background: yellow;
margin: 6px;
background-image: url(3.jpg);
background-size: cover;
}