Автоматическое изменение размера изображения в макете CSS FlexBox и сохранение соотношения сторон?

Я использовал макет гибкого блока CSS, который выглядит, как показано ниже:

Если экран становится меньше, он превращается в это:

Проблема в том, что размеры изображений не изменяются, сохраняя пропорции исходного изображения.

Можно ли использовать чистый CSS и макет гибкого блока, чтобы разрешить изменение размера изображений, если экран становится меньше?

Вот мой 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, сохраняя соотношение сторон пикселей. Т.е. вы хотите заполнить ячейку изображением, увеличивая и обрезая изображение.

Если это ваша проблема, то предоставленный вами код НЕ отражает «вашу проблему», а отражает ваш начальный пример.

Учитывая предыдущие два предположения, то, что вам нужно, не может быть выполнено с фактическими изображениями, если высота блока является динамической, а с фоновыми изображениями. Либо с помощью «background-size: contain», либо с помощью этих методов (умные отступы в процентах, которые ограничивают обрезку или максимальные размеры в любом месте): http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm

Единственный способ, которым это возможно с изображениями, - это если мы ЗАБЫВАЕМ о вашем втором iimage, а ячейки имеют фиксированную высоту, и К УДАЧУ, судя по вашим образцам изображений, высота останется такой же!

Поэтому, если высота вашего контейнера не меняется, и вы хотите, чтобы ваши изображения оставались квадратными, вам просто нужно установить максимальную высоту изображений на это известное значение (за вычетом отступов или границ, в зависимости от свойства размера поля для клетки)

Как это:

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

Ваш код недействителен (открывающие теги вместо закрывающих, поэтому они выводят ВСТАВЛЕННЫЕ ячейки, а не братьев и сестер, он использовал СКРИНШОТ ваших изображений внутри ошибочного кода, а гибкое поле не содержит ячеек, но оба примера в столбце ( вы устанавливаете «строку», но поврежденный код, встраивающий одну ячейку в другую, привел к гибкости внутри гибкого трубопровода и, наконец, работал как КОЛОННЫ. Я понятия не имею, чего вы хотели достичь и как вы придумали этот код, но я Я догадываюсь, что ты хочешь этого.

Я также добавил 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%;
}