Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> .image-container { largeur: 200px; hauteur: 300px; bordure: 1px solide noir; marge-inférieure: 25px; } .image-container img { largeur: 100%; hauteur: 100%; object-fit: contain; } </style> </head> <body> <h2>Utiliser object-fit: contain</h2> <p>La valeur object-fit: contain; préserve le rapport d'aspect et ajuste l'image à l'intérieur du conteneur, sans couper - laissera de l'espace vide si nécessaire :</p> <div class="image-container"> <img src="paris.jpg" alt="Paris" width="400" height="300"> </div> <div class="image-container"> <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> </div> </body> </html>