Автоматична зміна розміру зображення в макеті CSS FlexBox та збереження пропорції?

Я використовував макет CSS flex box, який відображається, як показано нижче:

Якщо екран стає менше, це перетворюється на таке:

Проблема полягає в тому, що розміри зображень не змінюються, зберігаючи пропорції до вихідного зображення.

Чи можна за допомогою чистого CSS та макета flex box змінити розмір зображень, якщо екран стає менше?

Ось мій html:

<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:

.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%;}це один із способів зробити це. Просто додайте його у свій CSS-код.

http://jsfiddle.net/89dtxt6s/

Я прийшов сюди, шукаючи відповіді на свої спотворені образи. Не повністю впевнений у тому, що шукає вище, але я виявив, що додавання align-items: centerдозволить вирішити це для мене. Читаючи документи, має сенс замінити це, якщо ви згинаєте зображення безпосередньо, оскільки align-items: stretchце за замовчуванням. Інше рішення - спочатку обернути ваші зображення div.

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

Можливо, ви захочете спробувати нову та просту функцію CSS3:

img { 
  object-fit: contain;
}

Він зберігає співвідношення зображень (як коли ви використовуєте трюк фонового зображення), і в моєму випадку добре працював над тим самим випуском.

Будьте обережні, це не підтримується IE (див. Деталі підтримки тут ).

Я пропоную розглянути background-sizeваріанти регулювання розміру зображення.

Замість того, щоб зображення на сторінці було встановлено як фонове зображення, ви можете встановити:

background-size: contain

або

background-size: cover

Ці параметри враховують як висоту, так і ширину при масштабуванні зображення. Це буде працювати в IE9 та всіх інших останніх браузерах.

На другому зображенні виглядає так, ніби ви хочете, щоб зображення заповнило поле, але створений вами приклад НЕ зберігає пропорції (домашні тварини виглядають нормально, а не худенькими чи товстими).

Я не маю уявлення, чи фотографували ви ці зображення як приклад, або другий - це також "як має бути" (ви сказали Є, тоді як у першому прикладі ви сказали "повинен")

У будь-якому випадку, я повинен припустити:

Якщо "розміри зображень не змінюються, зберігаючи пропорції", і ви показуєте мені зображення, яке НЕ зберігає пропорцію пікселів, я повинен припустити, що ви намагаєтесь виконати співвідношення сторін області "обрізання" (внутрішня частина зелений) WILE, зберігаючи пропорції пікселів. Тобто ви хочете заповнити клітинку зображенням, збільшивши та обрізавши зображення.

Якщо це ваша проблема, код, який ви надали, відображає НЕ "вашу проблему", а ваш початковий приклад.

З огляду на попередні два припущення, те, що вам потрібно, не можна досягти за допомогою фактичних зображень, якщо висота поля динамічна, а за допомогою фонових зображень. Або за допомогою "фонового розміру: містити", або цих методів (розумні відступи у відсотках, які обмежують обрізку або максимальні розміри де завгодно): http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm

Єдиний спосіб, коли це можливо з зображеннями, це якщо ми ЗАБУДЕМО про ваше друге зображення, і клітинки мають фіксовану висоту, і, НА ЖАЛІ, судячи з ваших зразків зображень, висота залишається незмінною!

Отже, якщо висота вашого контейнера не змінюється, і ви хочете зберегти свої зображення квадратними, вам просто потрібно встановити максимальну висоту зображень до цього відомого значення (мінус відступи або межі, залежно від властивості розміру коробки в клітини)

Подобається це:

<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>

І 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/

Ваш код недійсний (відкриваючі теги замість закриття, тому вони виводять NESTED комірки, а не братів і сестер, він використав SCREENSHOT ваших зображень всередині несправного коду, а поле flex не містить клітинки, а обидва приклади в стовпці ( ви встановили "рядок", але пошкоджений код, що вкладає одну клітинку всередину іншої, привів до гнучкості всередині флексу, нарешті, працюючи як СТОПЦИ. Я не уявляю, що ви хотіли виконати і як ви придумали цей код, але я м, здогадуючись, що ти хочеш, це це.

Я також додав display: flex до клітинок, тому зображення стає центрованим (я думаю, display: tableміг би бути використаний тут і з усією цією розміткою)

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;
}

Ось як би я обробляв різні зображення (розміри та пропорції) у гнучкій сітці.

.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>

Я використовую jquery або vw, щоб зберегти коефіцієнт

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%;
}