javascript - Bagaimana untuk memusatkan elemen img dalam div, seperti yang ditunjukkan dalam contoh di bawah

Question

Kod HTML

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

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

Contoh gambar kesan yang diingini

Kawasan merah p, kawasan hijau img

Dalam erti kata lain, img lebih luas

Lebar img tidak tetap, jadi ia tidak boleh diselesaikan dengan membetulkan margin-kiri

• Ditanya pada 20 April
• 2 Komen
• Jemput jawab
• edit
• Lagi
  • Laporkan
  • Tutup

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Isihan lalai Pengisihan masa

13 jawapan

Jawapannya membantu dan mempunyai nilai rujukan 3 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Ada cara, tetapi daripada menggunakan tag img, tambahkan imej latar belakang pada p.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Dijawab pada 20 April
Komen
Sunting

Encik Xiang

227 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 1 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Kedudukan gambar margin kiri:-(lebar/2) Bagi lebar img tidak tetap, ia boleh diperolehi oleh js dan kemudian secara dinamik menetapkan marginleft

• Dijawab pada 20 April
• Komen
• Sunting

Lihatlah dunia dengan mata yang dingin177 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 1 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Balut lapisan lain.

<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

Dijawab pada 20 April
• · Dikemas kini pada 20 April
2 Komen
Sunting

toBeTheLight

4.9k Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 1 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

img ialah elemen blok sebaris dan boleh dijajarkan teks secara langsung di peringkat induk: tengah;

• Dijawab pada 3 Mei
• Komen
• Sunting

hugangqiang117 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 1 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Sebenarnya, kami ingin mencapai kesan pemusatan mendatar Berikut adalah empat kaedah untuk mencapai pemusatan mendatar (Nota: Dalam setiap contoh di bawah, operasi penjajaran elemen kanak-kanak dilaksanakan, dan bekas induk bagi elemen kanak-kanak ialah. unsur induk)

Gunakan blok sebaris dan penjajaran teks untuk melaksanakan

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

Kelebihan: keserasian yang baik;

Kelemahan: perlu menetapkan elemen anak dan elemen ibu bapa pada masa yang sama

Gunakan margin:0 auto untuk mencapai

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

Kelebihan: Keserasian yang baik

Keburukan: Perlu nyatakan lebar

Gunakan jadual untuk melaksanakan

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

Kelebihan: Anda hanya perlu menyediakan sendiri

Kelemahan: IE6 dan 7 perlu melaraskan struktur

Menggunakan kedudukan mutlak

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

Kelemahan: keserasian yang lemah, tersedia untuk IE9 dan ke atas

Pelaksanaan susun atur fleksibel yang praktikal

Kaedah pertama

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

Kaedah kedua

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

Kelemahan: keserasian yang lemah, jika susun atur kawasan besar dijalankan, kecekapan mungkin terjejas

Dijawab pada 5 Mei
Komen
Sunting

yogi27 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 0 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Balut p di luar Apabila img.onload, js mengira lebar dan menetapkannya ke lapisan luar. Tengahkan kandungan luar

Dijawab pada 21 April
Komen
Sunting

Jessica_loli

16 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 0 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Mula-mula berikan p kedudukan:relatif;

dan kemudian beri img {

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

}

Jika ia tidak serasi dengan c3, anda boleh berikan img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

• Dijawab pada 21 April
• Komen
• Sunting

clownzoo11 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 0 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

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 Gunakan flex

Dijawab pada 21 April
• · Dikemas kini pada 21 April
Komen
Sunting

Lone Wolf in the Wind

227 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 0 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Satu lapisan p di luar, dan satu lapisan p di dalam untuk mengehadkan saiz gambar

• Dijawab pada 3 Mei
• Komen
• Sunting

Fujinishi22 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 0 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

Anda boleh melihat jika anda tidak mempertimbangkan isu keserasian

object-fit

Dijawab pada 3 Mei
Komen
Sunting

CRIMX

865 Reputasi

Serahkan ulasan

× Komen menyokong sintaks Markdown separa: **bold**_italic_[link](http://example.com)> 引用`code`- Senaraikan .
Pada masa yang sama, pengguna anda @ juga akan menerima pemberitahuan

Jawapannya membantu dan mempunyai nilai rujukan 0 Jawapan itu tidak membantu. Ia adalah jawapan yang salah

给我你的怀抱2774 hari yang lalu1820

Answer 1

Ada caranya, tetapi daripada menggunakan tag img, tambahkan imej latar belakang pada p.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Answer 2

Kedudukan gambar margin kiri:-(lebar/2) Bagi lebar img tidak tetap, ia boleh diperolehi oleh js dan kemudian secara dinamik menetapkan marginleft

Answer 3

Balut lapisan lain.

<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

Answer 4

img ialah elemen blok sebaris dan boleh dijajarkan teks secara langsung di peringkat induk: tengah;

Answer 5

Sebenarnya, kami ingin mencapai kesan pemusatan mendatar Berikut adalah empat kaedah untuk mencapai pemusatan mendatar (Nota: Dalam setiap contoh di bawah, operasi penjajaran elemen kanak-kanak dilaksanakan, dan bekas induk bagi elemen kanak-kanak ialah. unsur induk)

Dicapai menggunakan inline-block dan text-align

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

Kelebihan: keserasian yang baik;

Kelemahan: perlu menetapkan elemen anak dan elemen ibu bapa pada masa yang sama

Gunakan margin:0 auto untuk mencapai

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

Kelebihan: Keserasian yang baik

Keburukan: Perlu nyatakan lebar

Gunakan jadual untuk melaksanakan

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

Kelebihan: Anda hanya perlu menyediakan sendiri

Kelemahan: IE6 dan 7 perlu melaraskan struktur

Menggunakan kedudukan mutlak

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

Kelemahan: keserasian yang lemah, tersedia untuk IE9 dan ke atas

Pelaksanaan susun atur fleksibel yang praktikal

Kaedah pertama

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

Kaedah kedua

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

Kelemahan: keserasian yang lemah, jika susun atur kawasan besar dijalankan, kecekapan mungkin terjejas

Answer 6

Balut p di luar Apabila img.onload, js mengira lebar dan menetapkannya ke lapisan luar. Tengahkan kandungan luar

Answer 7

Mula-mula berikan p kedudukan:relatif;
dan kemudian berikan img {

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

}
Jika ia tidak serasi dengan c3, anda boleh berikan img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

Answer 8

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

Answer 9

Satu lapisan p di luar, dan satu lapisan p di dalam untuk mengehadkan saiz gambar

Answer 10

Anda boleh melihat jika anda tidak mempertimbangkan isu keserasian object-fit