Изображение vs Div с фоном-изображение

Question

Im пытается создать сетку элементарных элементов с помощью бутстрапа и flex. Поэтому изображение элемента всегда должно растягиваться до 100% ширины доступного пространства, сохраняя соотношение 1: 1.

http://www.bootply.com/kPLGHtA7Kh

Я получил его на работу с помощью CSS фонового изображения. Но я изо всех сил стараюсь, чтобы он выглядел одинаково, используя img-tag. У меня заканчиваются идеи, надеюсь, вы можете мне помочь.

Answer 1

В вашем CSS просто укажите width: 100% на изображение и не трогайте его (или установите его на auto, который по умолчанию).

Родитель вашего изображения также должны иметь position:absolute или position:relative в порядке по ширине для правильной работы

Демо: http://jsfiddle.net/s3spdy5z/

Answer 2

Я думаю, что изображения толкают ширину коробки на max-width так вид переопределения настроек flexbox. С фоновыми изображениями у вас в основном нет содержимого внутри них, поэтому flexbox может рассчитать ширину и не беспокоиться о содержимом. Изображения установлены на 100%, но он думает, что вы хотите 100% от максимальной ширины, поэтому сетка больше не подходит.

Если вы установили width: 33%; на .flex-item и снимите мин и макс, сетки будут выглядеть одинаково.