Comment centrer et adapter des images en CSS

Les terminaux mobiles nécessitent essentiellement un traitement d'adaptation d'image, comme les images de carrousel, les images de couverture de produit, etc. ; les images publiées par les utilisateurs ne sont pas des images dimensionnées. AlorsLes amis qui font du développement mobile rencontrent-ils des difficultés à s'adapter aux images ? Laissez-moi vous dire, en fait, CSS a un attribut object-fit, ce qui peut être très pratique pour nous pour ajuster les images. Cet article est la méthode d'ajustement des images en CSS compilée par l'éditeur.

Alors, que peut-on faire ? Il se trouve que CSS3 a l'attribut object-fit

Parlons de chaque valeur d'attribut

1.object-fit: cover;

Cette valeur d'attribut est la plus couramment utilisée sur le terminal mobile. Regardez l'exemple ci-dessous

<img src="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg" alt="">

//css部分
img{
    border: 2px red solid;
	width: 300px;    
	height: 300px;
    object-fit: cover;
}

La couverture est centrée pour remplir tout le contenu. Un côté sera complètement rempli et le reste sera rogné (le rembourrage ici remplira certainement tout le contenu)

Rendu

Rapport de taille d'image d'origine

2.object-fit: fill;

fill consiste à remplir tout le contenu, mais ne dépassera pas le contenu. Lorsqu'un côté est rempli, s'il reste encore un espace vide, il sera tiré vers le haut pour remplir tout le contenu

Rendu

Voir l'image originale ci-dessus

3.object-fit : contain;

Contain ne dépassera pas le contenu une fois rempli. Lorsqu'un côté est rempli, le remplissage se termine et le rapport de l'image ne sera pas augmenté ou modifié de cette façon, lorsque l'image n'est pas suffisante pour remplir. tout le contenu, un côté restera vide.

Rendu

Voir l'image originale ci-dessus

4.object-fit : scale-down;

scalc-down donne la même impression que contain, et je ne le fais pas Je ne vois rien. Différent, si des frères le savent, bienvenue pour communiquer

5.object-fit: none;

none est la valeur d'attribut par défaut, et aucun remplissage ne sera donné

Résumé : Compatibilité En gros, tous les navigateurs mobiles sont compatibles, sauf s'ils sont plus anciens que vous. Si le contenu ci-dessus n'est pas très clair, il peut être comparé à une image qui est progressivement agrandie (remplie) de très petite à très petite au milieu du contenu du format d'image que vous avez défini. Si vous ne comprenez toujours pas, c'est peut-être que mon organisation linguistique n'est pas assez bonne. Rendez-vous ensuite sur la documentation officielle

[Cours recommandé :

cours vidéo 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!