Maison >interface Web >tutoriel CSS >Comment redimensionner les images proportionnellement avec CSS

Comment redimensionner les images proportionnellement avec CSS

王林
王林original
2020-11-16 11:51:4325621parcourir

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é.

Comment redimensionner les images proportionnellement avec CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn