Comment redimensionner les images proportionnellement avec CSS

Comment redimensionner les images proportionnellement avec CSS : vous pouvez utiliser l'attribut object-fit pour y parvenir, tel que [object-fit: cover;]. L'attribut object-fit spécifie comment le contenu de l'élément doit s'adapter à la hauteur et à la largeur du conteneur spécifié.

Introduction à l'attribut : L'attribut

object-fit spécifie comment le contenu de l'élément doit s'adapter à la hauteur et à la largeur du conteneur spécifié. .

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

object-fit est généralement utilisé pour les balises img et vidéo. Généralement, ces éléments peuvent être coupés tout en conservant l'original. proportions, zoomer ou étirer directement, etc.

Syntaxe :

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Valeur de l'attribut :

• fill Par défaut, la proportion d'origine n'est pas garantie et le contenu est étiré Remplit tout le conteneur de contenu.

• contient conserve les proportions de taille d'origine. Le contenu est mis à l'échelle.

• la couverture conserve les proportions de la taille d'origine. Certains contenus pourront toutefois être coupés.

• aucun ne conserve la longueur et la largeur du contenu de l'élément d'origine, ce qui signifie que le contenu ne sera pas réinitialisé.

• la réduction conserve le rapport de taille d'origine. La taille du contenu est la même que celle de none ou de contain , selon lequel des deux donne un objet plus petit.

• initial Définir la valeur par défaut

• inherit Hériter des attributs de l'élément parent de cet élément.

Exemple :

Coupez l'image et conservez les proportions d'origine :

img.a {
  width: 200px;  
    height: 400px;  
    object-fit: cover;
}

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!