Как расстянуть картинку на весь блок?

Question

[Yana]

Не получается сделать картинку в размер блока. Вариант в background не подходит. Как можно выровнять? В чем ошибка?
скрин как есть
как должно быть

Answer 1

[nakree]

Используйте Flexbox.
Родителю задайте высоту, ширину и это:
display: flex;
flex-flow: row wrap;
justify-content: space-between;

https://jsfiddle.net/agopm21m/1/

Answer 2

[Максим Тимофеев]

Как расстянуть картинку на весь блок?

width: 100%;
Но у Вас там нет картинки, там background у блока.

Оффтоп, кто ж такие вещи
yana586ma8.temp.swtest.ru/wp-content/themes/clean_...
картинками делает? Это же ключевая фраза. Да и при масштабировании замыливается текст. и таких блоков миллион на сайте:
yana586ma8.temp.swtest.ru/wp-content/themes/clean_...
Кто ж Вам заплатит за это? Вы все что не знаете как сверстать картинками хренячите?
Мобильная версия вообще ад. Вы же boostrap подключили, так используйте его. Добавьте в head

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

И свой css подключите после boostrap, а не до него, иначе замучаетесь переопределять стили.

Иконки типа этой: yana586ma8.temp.swtest.ru/wp-content/themes/clean_... надо делать или спрайтом или иконочным шрифтом. Вы же подключили fontAwesome там есть эта иконка:
fontawesome.io/icon/map-marker
мало того, что лишний запрос на сервер не пойдет, так еще и потери качества не будет при масштабировании.
fixed блок в пол экрана высотой - это не user friendly

Comments

[Yana]

по запросу клиента без моб адаптации, с фиксированным хедером на пол-экрана и на некоторых страницах сайдбаром, лого, иконки и прочее от дизайнера и использовать можно только эти.

Спасибо за комментарий.

[Максим Тимофеев]

Yana Lins,

иконки и прочее от дизайнера и использовать можно только эти

Ну так в спрайт их запихните хотя бы

[Yana]

Максим Тимофеев, мнение заказчика слишком часто меняется для спрайтов

[Максим Тимофеев]

Yana Lins, вот смотрю я на то как сделан Ваш сайт и не верю Вам.
Как мнение заказчика связано с оптимизацией загрузок картинок?
Почему заказчик меняет мнение если есть утвержденный дизайн? Если такой договор, то это оплачиваемая правка, улыбайтесь берите деньги и переделывайте спрайт. Благо на это 2-3 минуты надо.

[Yana]

Максим Тимофеев, к сожалению, правки не оплачиваемые и от меня это не зависит

думаю каждый останется в любом случае при своем мнении

вам спасибо за уделенное время на мой вопрос