javascript - Bagaimana untuk memusatkan elemen img dalam div, seperti yang ditunjukkan dalam contoh di bawah
给我你的怀抱
给我你的怀抱 2017-05-16 13:21:39
0
13
1839

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

Isihan lalai Pengisihan masa

13 jawapan

3

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

227 Reputasi

1

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

1

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宽度。imgmargin-left就等于自身宽的一半,相当于left:-50%*width

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

4.9k Reputasi

1

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

  • Dijawab pada 3 Mei
  • Komen
  • Sunting

hugangqiang117 Reputasi

1

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

0

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

    Dijawab pada 21 April
  • Komen
  • Sunting

16 Reputasi

0

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

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

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

227 Reputasi

0

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

  • Dijawab pada 3 Mei
  • Komen
  • Sunting

Fujinishi22 Reputasi

0

Anda boleh melihat jika anda tidak mempertimbangkan isu keserasian

object-fit

    Dijawab pada 3 Mei
  • Komen
  • Sunting

865 Reputasi

0

给我你的怀抱
给我你的怀抱

membalas semua(13)
黄舟

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;
}
仅有的幸福

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

Peter_Zhu

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宽度。imgmargin-left就等于自身宽的一半,相当于left:-50%*width

洪涛

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

刘奇

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

过去多啦不再A梦

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

Ty80

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;

}

仅有的幸福

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

淡淡烟草味

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

巴扎黑

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan