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
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.
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.
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>
<img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>sedikit berbeda dengan teknik: Biola
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%;
}
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;
}
Hanya menginisialisasi posisi gambar sebagai berikut.
HTML :
<div>
<img id="img" src="/happy_cat.png"/>
</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.
