Pusat sebuah gambar besar yang tidak diketahui dalam ukuran yang lebih kecil div dengan overflow hidden

Saya ingin pusat img di dalam div tanpa javascript dan tanpa latar belakang-gambar.

Berikut ini adalah beberapa contoh kode

<div> 
    <img src="/happy_cat.png"/> 
</div>
  • I don't tahu ukuran img dan itu harus bisa melebihi lebar dari orang tua
  • I don't tahu lebar div induk (100%)
  • Orang tua div tetap tinggi
  • Gambar lebih besar dari orang tua dan orang tua memiliki overflow:hidden
  • Hanya perlu dukungan browser modern

Yang diinginkan. (Abaikan kekeruhan dll, hanya perhatikan posisi).

Aku tahu hal ini dapat dilakukan dengan mudah dengan gambar latar belakang yang ini't pilihan bagi saya. Saya juga bisa menggunakan javascript tapi sepertinya sangat berat tangan cara untuk mencapai hal ini.

Terima kasih!!!

Jack

JackMahoney
Pertanyaan edit 30 Oktober 2013 в 10:23
Pemrograman
css3 html css
30 Oktober 2013 в 4:33
20 tayangan
Mengomentari pertanyaan (5)
Larutan

Bagaimana dengan ini:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Ini mengasumsikan bahwa orang tua div diposisikan relatif. Saya pikir ini bekerja jika anda ingin .img relatif strategis daripada benar-benar. Hanya menghapus posisi: absolut dan perubahan atas/kiri untuk margin-top dan margin-left.

Anda'll mungkin ingin menambahkan dukungan browser dengan mengubah, -moz-transform dll.

Evan Layman
Jawaban edit 1 Agustus 2015 в 1:59
Komentar (8)

Pertanyaan lama, baru menjawab:

Ketika gambar yang lebih besar dari pembungkus div text-align:center atau margin:auto tidak akan bekerja. Tapi jika gambar yang lebih kecil, maka solusi dengan posisi absolut atau negatif margin kiri akan menghasilkan efek yang aneh.

Jadi, ketika ukuran gambar adalah benar-benar tidak diketahui sebelumnya (seperti pada CSM) dan mungkin lebih besar atau lebih kecil dari pembungkus div, ada yang elegan CSS3 solusi yang melayani semua keperluan:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

Perhatikan bahwa tergantung pada aturan-aturan lain dalam stylesheet anda, anda mungkin perlu untuk menambahkan width:auto dan/atau max-width:tidak ada ke img.

RavanH
Jawaban edit 14 Oktober 2015 в 8:49
Komentar (6)

Ini selalu sedikit rumit dan ada banyak solusi di luar sana. Saya menemukan solusi terbaik untuk menjadi sebagai berikut. Ini pusat-pusat itu baik secara vertikal dan horizontal.

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML 

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>

</div>

[Melihatbiola**][1]

sedikit berbeda dengan teknik: [Biola][2]

bicycle
Jawaban edit 31 Oktober 2013 в 10:26
Komentar (10)

Terima kasih semua orang untuk membantu anda. <menyerang>I'm akan menganggap ini tidak bisa diraih dalam CSS saja.

Aku akan pindah ke jQuery solusi. Berikut ini adalah beberapa [palsu]kode untuk mereka yang tertarik.</strike>

Aku akan menyerah pada CSS solusi tapi sepertinya itu bisa dilakukan (lihat jawaban yang diterima). Berikut ini adalah JS solusi aku akan pergi dengan.

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

Dan yang menyertainya css

img{
  position:absolute;
  left:50%;
}
JackMahoney
Jawaban edit 5 November 2013 в 11:46
Komentar (0)

Aku tahu ini sudah tua tapi aku juga datang dengan css murni solusi yang sangat mirip dengan di atas.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}
Komentar (0)

Hanya menginisialisasi posisi gambar sebagai berikut.

HTML :

<div> 

</div>

CSS :

#img {
    left: 0;
    right: 0;
}

Atau melihat dengan margin: auto;

Ini adalah untuk menyelaraskan horisontal. Untuk menyelaraskan vertikal juga, anda dapat melakukan display: table-cell; untuk anda <div> kemudian vertical-align: middle; tetapi's tidak praktek yang baik karena anda <div> bukan sebuah meja.

Emilie
Jawaban edit 30 Oktober 2013 в 8:11
Komentar (2)