CSS flexbox. Можно ли изменить размер изображения?

304

22 февраля 2018, 12:17

Все четыре изображения большого размера.

html, 
body { 
  padding: 0; 
  margin: 0; 
  font-size: 0; 
  display: flex; 
}

<img src="https://www.3ders.org/images/slug-traq-3d-printed-test-1.png" alt=""> 
<img src="https://www.3ders.org/images/slug-traq-3d-printed-test-1.png" alt=""> 
<img src="https://www.3ders.org/images/slug-traq-3d-printed-test-1.png" alt=""> 
<img src="https://www.3ders.org/images/slug-traq-3d-printed-test-1.png" alt="">

Вопрос такой. Можно ли средствами лишь flexbox, без применения к изображениям width и тп, изменить размер изображения? Дело в том, что по стандарту изображения выстариваются одну линию и не подгоняются под ширину страницы. Хотелось бы чтобы их ширина подгонялась под страницу, а высота определялась автоматически. Оборнуть это дело в контейнер типа div нельзя. Не знаю почему, такова задача =(

нашел еще column-fill, но он не относится к flexbox на прямую. Спасибо за ответы.

Answer 1

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

Если у родительского компонента задать height: 100%; тогда изображения автоматически смогут подстраиваться по высоте. Но с шириной так не получится.

Могу посоветовать лишь использовать у изображений width. Например, так:

html,
body {
  padding: 0;
  margin: 0;
  font-size: 0;
  display: flex;
  width: 100%;
  height: 100%; // позволяет дочерним компонентам растягиваться на всю высоту
}
img {
   width: calc(100% / 4);
  // object-fit: cover; // если хотите, чтобы чтобы изображение масштабировалась пропорционально 
}

Answer 2

body{ 
  margin:0; 
  display:flex; 
  align-items:flex-start; 
} 
img{ 
  flex:1 1 auto; 
  /*Ширина тут чисто символическая, для корректной работы flexBox*/ 
  width:10px; 
}

<img src="http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg" alt="" /> 
<img src="http://bipbap.ru/wp-content/uploads/2017/10/3-6.png" alt="" /> 
<img src="http://www.bugaga.ru/uploads/posts/2016-08/1471555196_subbota-25.jpg" alt="" /> 
<img src="http://www.prikol.ru/wp-content/gallery/october-2017/kartinki-04102017-001.jpg" alt="" />

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как настроить скролл вниз/вверх ?

Как сделать следующую реализацию:

242

CSS

Почему SVG никак не реагирует?

Хочу плавно отрисовать эту руку с калькулятором, нашел часть руки, её длину, но почему она никак не реагирует на изменений stroke-daharray и offset, причем...

275

CSS

Как правильно задать размеры SVG для фона

Хочу сверстать на svg фоновую картинку, внутри самого svg будут разные деталиИдея в том, чтобы всю эту конструкцию без проблем можно было бы подогнать...

339

CSS

Чередование динамически блоков

Привет всемВопрос такой может кто уже сталкивался есть такая верстка к примеру

221