<style>
p {
overflow: hidden ;
}
img {
height: 100% ;
width: auto ;
}
</style>
<p>
<img src='//foo.com/foo.jpg' />
</p>
La zone rouge est p, la zone verte est img
En d'autres termes, l'image est plus large
La largeur de img n'est pas fixe, elle ne peut donc pas être résolue en corrigeant margin-left
Tri par défaut Tri temporel
Il existe un moyen, mais au lieu d'utiliser la balise img, ajoutez une image d'arrière-plan à p.
p {
background-image: url(image-url);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Positionnement de l'image marginleft :-(width/2) Quant à la largeur de img n'est pas fixe, elle peut être obtenue par js puis définir dynamiquement marginleft
Enveloppez une autre couche.
<p id="wrapper">
<p id="wrapper2">
<img src="demo_img3.jpg" alt="" />
</p>
</p>#wrapper{
position: relative;
width: 200px;
height: 200px;
}
#wrapper2{
position: absolute;
left: 50%;
}
img{
margin-left: -50%;
}wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width
img est un élément de bloc en ligne et peut être directement aligné sur le texte au niveau parent : center;
En fait, nous voulons obtenir l'effet de centrage horizontal. Voici quatre méthodes pour obtenir un centrage horizontal (Remarque : dans chaque exemple ci-dessous, l'opération d'alignement de l'élément enfant est implémentée et le conteneur parent de l'élément enfant est implémenté. l'élément parent)
.parent{
text-align: center;
}
.child{
display: inline-block;
}Avantages : bonne compatibilité ;
Inconvénients : nécessité de définir les éléments enfants et les éléments parents en même temps
.child{
width:200px;
margin:0 auto;
}Avantages : Bonne compatibilité
Inconvénients : Nécessité de préciser la largeur
.child{
display:table;
margin:0 auto;
}Avantages : il vous suffit de vous configurer vous-même
Inconvénients : IE6 et 7 doivent ajuster la structure
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform:translate(-50%);
}Inconvénients : mauvaise compatibilité, disponible pour IE9 et supérieur
.parent{
display:flex;
justify-content:center;
}.parent{
display:flex;
}
.child{
margin:0 auto;
}Inconvénients : mauvaise compatibilité, si un aménagement de grande surface est réalisé, l'efficacité peut être affectée
Enveloppez p à l'extérieur. Lorsque img.onload, js calcule la largeur et l'attribue au calque externe. Centrez le contenu externe
Donnez d'abord à p une position:relative;
puis donnez à img a {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);}
S'il n'est pas compatible avec c3, vous pouvez donner img{
position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;}
1
img{
display: block;
margin: 0 auto;
}2
p{
text-align: center;
img{
display: inline-block;
}
}
3
p{
position: relative;
img{
position: absolute;
left: 50%;
top: 50%;
margin: -(图片高度/2) 0 0 -(图片宽度/2)
}
}
4 Utilisez flex
Une couche de p à l'extérieur et une couche de p à l'intérieur pour limiter la taille de l'image
Vous pouvez y jeter un œil si vous ne considérez pas les problèmes de compatibilité object-fit
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il existe un moyen, mais au lieu d'utiliser la balise img, ajoutez une image d'arrière-plan à p.
Positionnement de l'image marginleft :-(width/2) Quant à la largeur de img n'est pas fixe, elle peut être obtenue par js puis définir dynamiquement marginleft
Enveloppez une autre couche.
wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*widthimg est un élément de bloc en ligne et peut être directement aligné sur le texte au niveau parent : center;
Réalisé en utilisant le bloc en ligne et l'alignement du texte
Utilisez margin:0 auto pour réaliser
Utilisez le tableau pour mettre en œuvre
Utiliser le positionnement absolu
Mise en œuvre pratique de la mise en page flexible
La première méthode
La deuxième méthode
Enveloppez p à l'extérieur Lorsque img.onload, js calcule la largeur et l'attribue au calque externe. Centrez le contenu externe
Donnez d'abord à p une position:relative;
puis donnez à img a {
}
S'il n'est pas compatible avec c3, vous pouvez donner img{
}
1
2
3
4用flex
Une couche de p à l'extérieur et une couche de p à l'intérieur pour limiter la taille de l'image
Vous pouvez y jeter un œil si vous ne considérez pas les problèmes de compatibilité
object-fit