Apprenez comment le style des images en utilisant le CSS.
Images arrondi
Utilisez le border-radius propriété pour créer des images arrondies:
Images Thumbnail
Utilisez la border propriété pour créer des images miniatures.
Vignette:
Images Responsive
images réactives seront automatiquement ajuster à la taille de l'écran.
Redimensionner la fenêtre du navigateur pour voir l'effet:
Si vous voulez une image à l'échelle vers le bas si elle doit, mais jamais évoluer jusqu'à être plus grande que sa taille d'origine, ajouter ce qui suit:
Astuce: En savoir plus sur Responsive Web Design dans notre CSS Tutorial RWD .
image Text
Comment positionner le texte dans une image:
Exemple
Essayez-le vous-même:
En haut à gauche » en haut à droite» En bas à gauche » En bas à droite» Centré »Polaroid Images / Cartes
La langue du Troll à Hardanger, Norvège
Northern Lights en Norvège
Exemple
div.polaroid {
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
Le CSS filter propriété ajoute des effets visuels (comme le flou et la saturation) à un élément.
Remarque: La propriété du filtre est pas pris en charge dans Internet Explorer Edge 12, ou Safari 5.1 et plus tôt.
Exemple
Changer la couleur de toutes les images en noir et blanc (100% de gris):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Astuce: Allez sur notre CSS filtre de référence pour en savoir plus sur les filtres CSS.
Responsive Galerie d'images
CSS peut être utilisé pour créer des galeries d'images. Cet exemple utilise les requêtes des médias pour réorganiser les images sur différentes tailles d'écran. Redimensionner la fenêtre du navigateur pour voir l'effet:
Exemple
.responsive {
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 » Astuce: En savoir plus sur Responsive Web Design dans notre CSS Tutorial RWD .
Image Modal (Avancé)
Ceci est un exemple pour montrer comment CSS et JavaScript peuvent travailler ensemble.
Tout d'abord, utiliser les CSS pour créer une fenêtre modale (boîte de dialogue), et de le cacher par défaut.
Ensuite, utilisez un script JavaScript pour afficher la fenêtre modale et pour afficher l'image à l'intérieur du modal, lorsqu'un utilisateur clique sur l'image:
Exemple
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
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;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Essayez - le vous - même »