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

Ответ 1

img {max-width:100%;} - это один из способов сделать это. Просто добавьте его в свой CSS-код.

http://jsfiddle.net/89dtxt6s/

Ответ 2

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

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

Ответ 3

Возможно, вы захотите попробовать очень новую и простую функцию CSS3:

img { 
  object-fit: contain;
}

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

Будьте осторожны, он не поддерживается IE (см. Подробности поддержки здесь).

Ответ 4

Предлагаю просмотреть параметры background-size, чтобы настроить размер изображения.

Вместо того, чтобы иметь изображение на странице, если оно установлено в качестве фонового изображения, вы можете установить:

background-size: contain

или

background-size: cover

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

Ответ 5

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

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

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

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

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

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

Единственное, что можно сделать с изображениями, это то, что мы ЗАБЫЛИ о вашем втором iimage, а ячейки имеют фиксированную высоту, и, судя по вашим образцам, FORTUNATELY, высота остается неизменной!

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

Вот так:

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

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

Ответ 6

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

Ответ 7

Вот как бы я обрабатывал разные изображения (размеры и пропорции) в гибкой сетке.

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

Ответ 8

Я использую jquery или vw для сохранения отношения

jquery

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

оч.сл.

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