it-swarm.com.ru

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

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

enter image description here

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

enter image description here

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

Можно ли использовать чистый 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;

}
65
confile

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

http://jsfiddle.net/89dtxt6s/

45
Omega

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

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

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

img { 
  object-fit: contain;
}

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

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

21
Lokinou

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

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

background-size: contain

или же 

background-size: cover

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

4
user3196436

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

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

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

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

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

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

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

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

Как это:

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

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

3
sergio

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

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

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