国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript – So zentrieren Sie das img-Element in einem div, wie im folgenden Beispiel gezeigt
給我你的懷抱
給我你的懷抱 2017-05-16 13:21:39
0
13
1975

Html-Code

<style>
    p {
        overflow: hidden ;
    }
    img {
        height: 100% ;
        width: auto ;
    }
</style>

<p>
    <img src='//foo.com/foo.jpg' />
</p>

Beispielbild des gewünschten Effekts

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

  • Gefragt am 20. April
  • 2 Kommentar
  • Zur Beantwortung einladen
  • bearbeiten
  • Mehr
    • Bericht
    • Schlie?en

Standardsortierung Zeitsortierung

13 Antworten

3

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;
}

    Beantwortet am 20. April
    • Kommentar
    • Bearbeiten

227 Ruf

1

Bildrand links positionieren: - (Breite/2) Da die Breite von img nicht festgelegt ist, kann sie mit js abgerufen und dann marginleft dynamisch festgelegt werden

  • Beantwortet am 20. April
  • Kommentar
  • Bearbeiten

Betrachten Sie die Welt mit kalten Augen177 Reputation

1

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就等于自身寬的一半，相當(dāng)于left:-50%*width

    Beantwortet am 20. April
  • · Aktualisiert am 20. April
    • 2 Kommentar
    • Bearbeiten

4,9k Reputation

1

img ist ein Inline-Block-Element und kann direkt auf der übergeordneten Ebene textausgerichtet werden: center;

  • Beantwortet am 3. Mai
  • Kommentar
  • Bearbeiten

hugangqiang117 Ruf

1

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;


Nachteile: Untergeordnete Elemente und übergeordnete Elemente müssen gleichzeitig festgelegt werden

Verwenden Sie margin:0 auto, um dies zu erreichen

.child{
    width:200px;
    margin:0 auto;
}

Vorteile: Gute Kompatibilit?t


Nachteile: Angabe der Breite erforderlich

Verwenden Sie die Tabelle zur Implementierung

.child{
    display:table;
    margin:0 auto;
}

Vorteile: Sie müssen sich nur selbst einrichten


Nachteile: IE6 und 7 müssen die Struktur anpassen

Verwenden Sie die absolute Positionierung, um das zu erreichen

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

Nachteile: schlechte Kompatibilit?t, verfügbar für IE9 und h?her

Praktische Flex-Layout-Implementierung

Die erste Methode

.parent{
    display:flex;    
    justify-content:center;
}

Die zweite Methode

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

Nachteile: schlechte Kompatibilit?t, bei gro?fl?chiger Auslegung kann es zu Effizienzeinbu?en kommen

    Beantwortet am 5. Mai
    • Kommentar
    • Bearbeiten

yogi27 Ruf

0

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

    Beantwortet am 21. April
    • Kommentar
    • Bearbeiten

16 Ruf

0

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;

}

  • Beantwortet am 21. April
  • Kommentar
  • Bearbeiten

clownzoo11 Ruf

0

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 Flex verwenden

    Beantwortet am 21. April
  • · Aktualisiert am 21. April
    • Kommentar
    • Bearbeiten

227 Ruf

0

Eine Schicht P auf der Au?enseite und eine Schicht P auf der Innenseite, um die Gr??e des Bildes zu begrenzen

  • Beantwortet am 3. Mai
  • Kommentar
  • Bearbeiten

Fujinishi22 Ruf

0

Sie k?nnen einen Blick darauf werfen, wenn Sie keine Kompatibilit?tsprobleme haben

object-fit

    Beantwortet am 3. Mai
    • Kommentar
    • Bearbeiten

865 Ruf

0

給我你的懷抱
給我你的懷抱

Antworte allen(13)
黃舟

有一個(gè)辦法，但不是用img標(biāo)簽，而是給p加background-image.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
僅有的幸福

定位啊 圖片 marginleft:-(width/2) 至于img的寬度不固定 完全可以js獲取 然后動(dòng)態(tài)設(shè)置marginleft

Peter_Zhu

再包一層。

<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就等于自身寬的一半，相當(dāng)于left:-50%*width

洪濤

img是inline-block元素，可以在父級(jí)直接text-align: center;

劉奇

其實(shí)就是想達(dá)到水平居中的效果,下面介紹四種實(shí)現(xiàn)水平居中的方法（注：下面各個(gè)實(shí)例中實(shí)現(xiàn)的是child元素的對(duì)齊操作，child元素的父容器是parent元素）

使用inline-block 和 text-align實(shí)現(xiàn)

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

優(yōu)點(diǎn)：兼容性好；

不足：需要同時(shí)設(shè)置子元素和父元素

使用margin:0 auto來(lái)實(shí)現(xiàn)

.child{
    width:200px;
    margin:0 auto;
}

優(yōu)點(diǎn)：兼容性好

缺點(diǎn): 需要指定寬度

使用table實(shí)現(xiàn)

.child{
    display:table;
    margin:0 auto;
}

優(yōu)點(diǎn):只需要對(duì)自身進(jìn)行設(shè)置

不足:IE6,7需要調(diào)整結(jié)構(gòu)

使用絕對(duì)定位實(shí)現(xiàn)

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

不足：兼容性差,IE9及以上可用

實(shí)用flex布局實(shí)現(xiàn)

第一種方法

.parent{
    display:flex;    
    justify-content:center;
}

第二種方法

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

缺點(diǎn)：兼容性差，如果進(jìn)行大面積的布局可能會(huì)影響效率

過(guò)去多啦不再A夢(mèng)

外面包裹p,在img.onload時(shí)，js算出寬度賦給外層。讓外層的內(nèi)容居中

Ty80

先給p一個(gè) position:relative;
然后給img一個(gè){

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
如果不兼容c3,可以給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 用flex

淡淡煙草味

外面一層p，里面一層p限制圖片的尺寸

巴扎黑

不考慮兼容問(wèn)題可以看看 object-fit

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage