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

Я пришел сюда в поисках ответа на свои искаженные изображения. Не совсем уверен в том, что op ищет выше, но я нашел, что добавление в 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 и все другие браузеры.

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

Я понятия не имею, если вы фотошопили эти изображения в качестве примера или второй "как это должно быть", а также (вы сказали, в то время как первый пример вы сказали "должен")

в любом случае, я должен считать:

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

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

учитывая предыдущие два предположения, то, что вам нужно не может быть выполняется с реальными изображениями, если высота окна динамическая, но с фоновыми изображениями. Либо с помощью "background-size: contain", либо этих методов (интеллектуальные отступы в процентах, которые ограничивают обрезку или максимальные размеры в любом месте, где вы хотите): 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/

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

я добавил дисплей: 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;
}

Я использую 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%;
}