Images CSS
Ce chapitre présente comment utiliser CSS pour mettre en page des images.
Images arrondies
Vignettes
Nous utilisonsborderAttributs pour créer des vignettes.
Exemple
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="paris.jpg.html" alt="Paris">
Essayez-le vous-même »
Exemple
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<a href="paris.jpg.html">
<img src="paris.jpg.html" alt="Paris">
</a>
Essayez-le vous-même »
Images responsives
Les images responsives s'adaptent automatiquement aux écrans de différentes tailles.
Dans l'exemple, vous pouvez redimensionner le navigateur pour voir l'effet :
Si vous avez besoin de mettre librement à l'échelle des images, et que la taille agrandie de l'image n'est pas supérieure à sa valeur maximale d'origine, vous pouvez utiliser le code suivant :
Astuce :Pour plus de contenu sur le design Web responsive, vous pouvez consulterTutoriel sur le design responsive en CSS。
Texte sur l'image
Comment positionner le texte sur une image :
Exemple
Essayez-le :
Coin supérieur gauche » Coin supérieur droit » Coin inférieur gauche » Coin inférieur droit » Centre »Image de style carte
Exemple
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
Essayez-le vous-même »
Filtres d'image
CSS filterL'attribut est utilisé pour ajouter des effets visuels aux éléments (par exemple, flou et saturation).
Remarque : Internet Explorer Ou Safari 5.1 (et versions antérieures)Cet attribut n'est pas pris en charge.
Exemple
Changez la couleur de toutes les images en noir et blanc (100% en niveaux de gris) :
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
Essayez-le vous-même »
Astuce :VisitezManuel de référence des filtres CSSVoir plus de contenu.
Galerie d'images responsive
Exemple
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
Essayez-le vous-même »
Fenêtre modale d'image
Cet exemple montre comment combiner CSS et JavaScript pour afficher des images ensemble.
Tout d'abord, nous utilisons CSS pour créer une fenêtre modale (boîte de dialogue), qui est masquée par défaut.
Ensuite, nous utilisons JavaScript pour afficher la fenêtre modale. Lorsque nous cliquons sur une image, l'image sera affichée dans la fenêtre contextuelle :
Exemple
var modal = document.getElementById('myModal');
// Obtenir la fenêtre modale de l'image ; l'attribut alt est utilisé comme description textuelle dans la fenêtre contextuelle de l'image
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Récupère l'élément <span> qui ferme la fenêtre modale
var span = document.getElementsByClassName("close")[0];
// Lorsque l'utilisateur clique sur <span> (x), ferme la fenêtre modale
span.onclick = function() {
modal.style.display = "none";
}
Essayez-le vous-même »