Ubah Ukuran Gambar secara Otomatis di Layout CSS FlexBox dan pertahankan Rasio Aspek?

Saya telah menggunakan tata letak kotak fleksibel CSS yang muncul seperti yang ditunjukkan di bawah ini:

Jika layar menjadi lebih kecil berubah menjadi ini:

Masalahnya adalah gambar tidak diubah ukurannya dengan menjaga rasio aspek dari gambar aslinya.

Apakah mungkin menggunakan CSS murni dan tata letak kotak fleksibel untuk membiarkan gambar diubah ukurannya jika layar menjadi lebih kecil?

Ini html saya:

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
</div>

CSS saya:

.content {
    background-color: yellow;    
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;

}

img {max-width:100%;}adalah salah satu cara untuk melakukan ini. Tambahkan saja ke kode CSS Anda.

http://jsfiddle.net/89dtxt6s/

Saya datang ke sini mencari jawaban untuk gambar saya yang terdistorsi. Tidak sepenuhnya yakin tentang apa yang dicari oleh operasi di atas, tetapi saya menemukan bahwa menambahkan align-items: centerakan menyelesaikannya untuk saya. Membaca dokumen, masuk akal untuk menimpa ini jika Anda meregangkan gambar secara langsung, karena align-items: stretchini adalah defaultnya. Solusi lain adalah membungkus gambar Anda dengan div terlebih dahulu.

.myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

Anda mungkin ingin mencoba fitur CSS3 yang sangat baru dan sederhana:

img { 
  object-fit: contain;
}

Ini mempertahankan rasio gambar (seperti saat Anda menggunakan trik gambar latar belakang), dan dalam kasus saya bekerja dengan baik untuk masalah yang sama.

Berhati-hatilah, ini tidak didukung oleh IE (lihat detail dukungan di sini ).

Saya sarankan mencari background-sizeopsi untuk menyesuaikan ukuran gambar.

Alih-alih memiliki gambar di halaman jika Anda telah mengaturnya sebagai gambar latar belakang, Anda dapat mengatur:

background-size: contain

atau

background-size: cover

Opsi ini mempertimbangkan tinggi dan lebar saat menskalakan gambar. Ini akan berfungsi di IE9 dan semua browser terbaru lainnya.

Pada gambar kedua sepertinya Anda ingin gambar mengisi kotak, tetapi contoh yang Anda buat TIDAK mempertahankan rasio aspek (hewan peliharaan terlihat normal, tidak kurus atau gemuk).

Saya tidak tahu apakah Anda mem-photoshop gambar itu sebagai contoh atau yang kedua adalah "bagaimana seharusnya" juga (Anda mengatakan IS, sedangkan contoh pertama Anda mengatakan "harus")

Bagaimanapun, saya harus berasumsi:

Jika "gambar tidak diubah ukurannya dengan menjaga rasio aspek" dan Anda menunjukkan gambar yang TIDAK mempertahankan rasio aspek piksel, saya harus berasumsi bahwa Anda mencoba mencapai rasio aspek dari area "pemotongan" (bagian dalam hijau) WILE menjaga rasio aspek piksel. Yaitu Anda ingin mengisi sel dengan gambar, dengan memperbesar dan memotong gambar.

Jika itu masalah Anda, kode yang Anda berikan TIDAK mencerminkan "masalah Anda", tetapi contoh awal Anda.

Mengingat dua asumsi sebelumnya, apa yang Anda butuhkan tidak dapat dicapai dengan gambar aktual jika ketinggian kotak dinamis, tetapi dengan gambar latar belakang. Baik dengan menggunakan "background-size: contains" atau teknik berikut (smart paddings dalam persen yang membatasi cropping atau ukuran maksimal dimanapun Anda inginkan): http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm

Satu-satunya cara hal ini dimungkinkan dengan gambar adalah jika kita LUPA tentang gambar kedua Anda, dan sel memiliki ketinggian tetap, dan SECARA TERLALU, dilihat dari gambar sampel Anda, tingginya tetap sama!

Jadi jika tinggi wadah Anda tidak berubah, dan Anda ingin menjaga gambar tetap persegi, Anda hanya perlu menyetel tinggi maksimal gambar ke nilai yang diketahui (dikurangi bantalan atau batas, tergantung pada properti ukuran kotak dari sel)

Seperti ini:

<div class="content">
  <div class="row">    
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
      </div>
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
      </div>
    </div>
</div>

Dan CSS:

.content {
    background-color: green;
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px;
    border: solid 10px red;
    text-align: center;
    height: 300px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
}
img {
    margin: auto;
    width: 100%;
    max-width: 300px;
    max-height:100%
}

http://jsfiddle.net/z25heocL/

Kode Anda tidak valid (tag pembuka bukan penutup, jadi mereka mengeluarkan sel NESTED, bukan saudara kandung, dia menggunakan SCREENSHOT gambar Anda di dalam kode yang salah, dan kotak fleksibel tidak menahan sel tetapi kedua contoh di kolom ( Anda mengatur "baris" tetapi kode korup yang bersarang di satu sel di dalam yang lain menghasilkan sebuah flex di dalam sebuah flex, akhirnya bekerja sebagai COLUMNS. Saya tidak tahu apa yang ingin Anda capai, dan bagaimana Anda membuat kode itu, tapi saya ' Saya menebak apa yang Anda inginkan adalah ini.

Saya menambahkan display: flex ke sel juga, jadi gambarnya berada di tengah (saya pikir display: tablebisa digunakan di sini juga dengan semua markup ini)

HTML:

<div class="container">
    <div class="box">
        <img src="http://lorempixel.com/1600/1200/" alt="">
    </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Begitulah cara saya menangani berbagai gambar (ukuran dan proporsi) dalam kisi yang fleksibel.

.images {
  display: flex;
  flex-wrap: wrap;
  margin: -20px;
}

.imagewrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 300px;
  margin: 10px;
}

.image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* set to 'auto' in IE11 to avoid distortions */
}

<div class="images">
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1000x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/500x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
</div>

Saya menggunakan jquery atau vw untuk menjaga rasio

jquery

function setSize() {
    var $h = $('.cell').width();
    $('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize); 

vw

 .cell{
    width:30vw;
    height:30vw;
}
.cell img{
    width:100%;
    height:100%;
}