Heim > Fragen und Antworten > Hauptteil
<style>
p {
overflow: hidden ;
}
img {
height: 100% ;
width: auto ;
}
</style>
<p>
<img src='//foo.com/foo.jpg' />
</p>
Der rote Bereich ist p, der grüne Bereich ist img
Mit anderen Worten, das Bild ist breiter
Die Breite des Bildes ist nicht festgelegt, daher kann das Problem nicht durch Festlegen des linken Rands behoben werden
Standardsortierung Zeitsortierung
Es gibt eine Möglichkeit, aber anstatt das img-Tag zu verwenden, fügen Sie ein Hintergrundbild zu p hinzu.
p {
background-image: url(image-url);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
Bildrand links positionieren: - (Breite/2) Da die Breite von img nicht festgelegt ist, kann sie mit js abgerufen und dann marginleft dynamisch festgelegt werden
Eine weitere Schicht einwickeln.
<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 ist ein Inline-Block-Element und kann direkt auf der übergeordneten Ebene textausgerichtet werden: center;
Tatsächlich möchten wir den Effekt der horizontalen Zentrierung erzielen. Hier sind vier Methoden, um eine horizontale Zentrierung zu erreichen (Hinweis: In jedem Beispiel unten wird die Ausrichtungsoperation des untergeordneten Elements implementiert, und der übergeordnete Container des untergeordneten Elements ist das übergeordnete Element)Erreicht mit Inline-Block und Text-Alignment
.parent{
text-align: center;
}
.child{
display: inline-block;
}Vorteile: gute Kompatibilität;Verwenden Sie margin:0 auto, um dies zu erreichen
Nachteile: Untergeordnete Elemente und übergeordnete Elemente müssen gleichzeitig festgelegt werden
.child{
width:200px;
margin:0 auto;
}Vorteile: Gute KompatibilitätVerwenden Sie die Tabelle zur Implementierung
Nachteile: Angabe der Breite erforderlich
.child{
display:table;
margin:0 auto;
}Vorteile: Sie müssen sich nur selbst einrichtenVerwenden Sie die absolute Positionierung, um das zu erreichen
Nachteile: IE6 und 7 müssen die Struktur anpassen
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform:translate(-50%);
}Nachteile: schlechte Kompatibilität, verfügbar für IE9 und höherPraktische Flex-Layout-Implementierung
.parent{
display:flex;
justify-content:center;
}.parent{
display:flex;
}
.child{
margin:0 auto;
}Nachteile: schlechte Kompatibilität, bei großflächiger Auslegung kann es zu Effizienzeinbußen kommen
Wrap p außerhalb. Wenn img.onload, berechnet js die Breite und weist sie der äußeren Ebene zu. Zentrieren Sie den äußeren Inhalt
Geben Sie p zuerst eine position:relative;
und geben Sie dann img ein {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);Wenn es nicht mit c3 kompatibel ist, können Sie img geben{
position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;
1
img{
display: block;
margin: 0 auto;
}
p{
text-align: center;
img{
display: inline-block;
}
}
p{
position: relative;
img{
position: absolute;
left: 50%;
top: 50%;
margin: -(图片高度/2) 0 0 -(图片宽度/2)
}
}
Eine Schicht P auf der Außenseite und eine Schicht P auf der Innenseite, um die Größe des Bildes zu begrenzen
Sie können einen Blick darauf werfen, wenn Sie keine Kompatibilitätsprobleme haben
object-fit
大家讲道理2017-05-16 13:23:39
css:
.box{
width: auto;
height: 100px;
position: absolute;
}
.box img{
width: 300px;//随便改
height: 100%;
background: green;
}
.box .inner{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
}
html:
<p class="box">
<img src="aaa.png" alt="">
<p class="inner"></p>
</p>