Ce chapitre présentera comment utiliser CSS pour mettre en page des images.

Image arrondie

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border-radius: 8px;
}
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris" width="400" height="300">
</body>
</html>

Exemple

Image ovale :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border-radius: 50%;
}
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris" width="400" height="300">
</body>
</html>


Vignette

Nous utilisons l'attribut border pour créer des vignettes.

Instance

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
<img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris">

Instance

a {
    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">
  <img src="https://img.php.cn/upload/course/000/000/004/580989ec73194566.jpg" alt="Paris">
</a>

Images réactives

Les images réactives s'adapteront automatiquement à différentes tailles d'écran.

Dans l'exemple, vous pouvez vérifier l'effet en réinitialisant la taille du navigateur :

Norway

Si vous devez redimensionner librement l'image et la taille agrandie de l'image n'est pas plus grande que sa taille. Pour la valeur maximale d'origine, vous pouvez utiliser le code suivant :

Instance

img {
    max-width: 100%;
    height: auto;
}

Comment positionner le texte de l'image

Texte de l'image :

Exemple

Norway
Coin inférieur gauche
En haut à gauche coin
Coin supérieur droit
Coin inférieur droit
Centré

Style carte image

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;
}

Filtre d'image

L'attribut CSS filter est utilisé pour ajouter des effets visuels ( comme le flou et la saturation) aux éléments.

Remarque : Internet Explorer ou Safari 5.1 (et versions antérieures) ne prennent pas en charge cet attribut.

Exemple

Changer la couleur de toutes les images en noir et blanc (100 % en niveaux de gris) :

img 
{
    
-webkit-filter:
 grayscale(100%);
 
/* Chrome, Safari, 
Opera */
     
    
filter:
 grayscale(100%);
}

Album photo réactif

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%;
    }
}


Photo Modal (modal)

Cet exemple montre comment combiner CSS et JavaScript pour restituer 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 l'image, l'image sera affichée dans la fenêtre pop-up :

Exemple

//Obtenir la fenêtre modale

var modal = document.getElementById('myModal');
// 获取图片模态框，alt 属性作为图片弹出中文本描述
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";
}