Dengan menggunakan model kotak fleksibel CSS, bagaimana cara memaksa gambar untuk mempertahankan rasio aspeknya?

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

Perhatikan bahwa gambar melebar atau menyusut untuk mengisi lebar wadah. Tidak apa-apa, tetapi dapatkah kita juga membuatnya meregangkan atau mengecilkan ketinggian untuk mempertahankan proporsi gambar?

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Untuk tag img jika Anda menentukan satu sisi maka sisi lainnya diubah ukurannya untuk menjaga rasio aspek dan secara default gambar diperluas ke ukuran aslinya.

Menggunakan fakta ini jika Anda membungkus setiap tag img ke dalam tag div dan menyetel lebarnya menjadi 100% dari div induk, maka tingginya akan sesuai dengan rasio aspek yang Anda inginkan.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

Untuk menjaga agar gambar tidak meregang di salah satu sumbu di dalam induk fleksibel, saya telah menemukan beberapa solusi.

Anda dapat mencoba menggunakan object-fit pada gambar yang, mis

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Atau Anda dapat menambahkan aturan flex-specfic yang mungkin bekerja lebih baik dalam beberapa kasus.

align-self: center;
flex: 0 0 auto;

Tidak perlu menambahkan div yang mengandung.

Default untuk properti css "align-items" adalah "stretch" yang menyebabkan gambar Anda ditarik hingga ketinggian aslinya. Menyetel properti css "align-items" ke "flex-start" akan memperbaiki masalah Anda.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

Sebagian besar gambar dengan dimensi intrinsik , yaitu ukuran yang wajar, seperti jpeggambar. Jika ukuran yang ditentukan menentukan salah satu dari lebar dan tinggi, nilai yang hilang ditentukan dengan menggunakan rasio intrinsik ... - lihat MDN .

Tapi itu tidak berfungsi seperti yang diharapkan jika gambar yang disetel sebagai item flex langsung dengan Modul Tata Letak Kotak Fleksibel Level 1 , sejauh yang saya tahu.

Lihat diskusi ini dan laporan bug mungkin terkait:

• Flexbugs # 14 - Ukuran Intrinsik Chrome / Flexbox tidak diterapkan dengan benar.
• Bug Firefox 972595 - Wadah fleksibel harus menggunakan "basis-fleksibel" daripada "lebar" untuk menghitung lebar intrinsik item fleksibel
• Masalah Chromium 249112 - Di Flexbox, izinkan rasio aspek intrinsik untuk menginformasikan penghitungan ukuran utama.

Sebagai solusinya, Anda bisa membungkus masing <img>- masing dengan a <div>atau a <span>, atau lebih.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Ukuran Minimum Tersirat dari Item Fleksibel

Untuk memberikan ukuran minimum default yang lebih masuk akal untuk item fleksibel , spesifikasi ini memperkenalkan nilai otomatis baru sebagai nilai awal properti min-width dan min-height yang ditentukan dalam CSS 2.1.

Atau, Anda dapat menggunakan tabletata letak CSS sebagai gantinya, yang akan Anda dapatkan hasil yang serupa flexbox, ini akan berfungsi di lebih banyak browser, bahkan untuk IE8.

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

Saya telah bermain-main dengan flexbox akhir-akhir ini dan saya menemukan solusi untuk ini melalui eksperimen dan alasan berikut. Namun, pada kenyataannya saya tidak yakin apakah ini yang sebenarnya terjadi.

Jika lebar nyata dipengaruhi oleh sistem fleksibel. Jadi setelah lebar elemen mencapai lebar maksimal induk, lebar ekstra yang disetel di css diabaikan. Maka aman untuk menyetel lebar ke 100%.

Karena tinggi tag img berasal dari gambar itu sendiri, maka mengatur tinggi ke 0% bisa melakukan sesuatu. (Di sinilah saya tidak jelas tentang apa ... tetapi masuk akal bagi saya bahwa itu harus memperbaikinya)

DEMO

(ingat pernah melihatnya di sini dulu!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Hanya bekerja di chrome

Perilaku ini diharapkan. flex container akan meregangkan semua anaknya secara default. Gambar tidak terkecuali. (yaitu, orang tua akan memiliki align-items: stretchproperti)

Untuk menjaga rasio aspek, kami memiliki dua solusi:

1. Ganti align-items: stretchproperti default ke align-items: flex-startatau align-self: centerdll., Http://jsfiddle.net/e394Lqnt/3/

atau

2. Setel properti align secara eksklusif ke anak itu sendiri: suka, align-self: centeratau align-self: flex-startdll. Http://jsfiddle.net/e394Lqnt/2/

Sebenarnya saya menemukan bahwa wadah dari tag gambar harus memiliki ketinggian untuk menjaga rasio gambar. misalnya>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

kemudian di html Anda, penampung Anda akan membungkus gambar tag

<div class="container"><img src="image.jpg" alt="image" /></div>

ini berfungsi untuk IE dan browser lain

Saya baru saja mengalami masalah yang sama. Gunakan flex align untuk menengahkan elemen Anda. Anda perlu menggunakan align-items: centerbukan align-content: center. Ini akan mempertahankan rasio aspek, sedangkan perataan-konten tidak akan mempertahankan rasio aspek.