Saya telah mencoba selama beberapa hari sekarang untuk mengkonfigurasi galeri thumbnail saya sehingga semua gambar muncul dengan tinggi dan lebar yang sama. Namun ketika saya mengubah kode Css menjadi,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
Saya mendapatkan gambar yang semuanya berukuran sama tetapi rasio aspeknya melebar sehingga merusak gambar. apakah tidak ada cara untuk mengubah ukuran penampung gambar dan bukan gambarnya? memungkinkan saya untuk menjaga rasio aspek. tapi tetap mengubah ukuran gambar. (Saya tidak keberatan jika saya memotong beberapa gambar.)
Terima kasih sebelumnya!
overflow: hidden
memotong kelebihannyaAnda dapat menggunakan
object-fit
properti css3, sepertiNamun, ini bukan jawaban Anda, karena tidak meregangkan wadah, tetapi berperilaku seperti galeri dan Anda dapat terus menata gaya
img
itu sendiri.Kelemahan lain dari solusi ini adalah masih kurangnya dukungan dari properti css3. Detail selengkapnya tersedia di sini: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . Solusi jQuery dapat ditemukan di sana juga.
sumber
Untuk membuat gambar dapat disesuaikan / fleksibel, Anda dapat menggunakan ini:
sumber
Letakkan sebagai latar belakang dudukan Anda misalnya
Ini akan memusatkan gambar Anda di dalam div 120x120 yang memotong kelebihan gambar
sumber
Jika Anda tidak ingin meregangkan gambar, masukkan ke dalam wadah div tanpa overflow dan pusatkan dengan menyesuaikan marginnya jika diperlukan.
HTML:
CSS:
sumber
Contoh:
lihat: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
sumber
Jika Anda mengetahui rasio spekt, Anda dapat menggunakan padding-bottom dengan persentase untuk mengatur tinggi tergantung dengan perbedaan.
sumber