<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
有一个办法，但不是用img标签，而是给p加background-image.
定位啊 图片 marginleft:-(width/2) 至于img的宽度不固定 完全可以js获取 然后动态设置marginleft
再包一层。
wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*widthimg是inline-block元素，可以在父级直接text-align: center;
使用inline-block 和 text-align实现
使用margin:0 auto来实现
使用table实现
使用绝对定位实现
实用flex布局实现
第一种方法
第二种方法
外面包裹p,在img.onload时，js算出宽度赋给外层。让外层的内容居中
先给p一个 position:relative;
然后给img一个{
}
如果不兼容c3,可以给img{
}
1
2
3
4 用flex
外面一层p，里面一层p限制图片的尺寸
不考虑兼容问题可以看看
object-fit