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

Question

[Александр Андреев]

Есть такой вот блок joxi.ru/1A5bnPGInEBzgr в обычном состоянии блок залит цветом, при hover-е под заливкой проявляется картинка растянутая на весь блок. Самым простом решением на мой взгляд было бы прописать картинку как background а заливку делать через псевдокласс :before абсолютно спозиционированный над блоком. Но это будет страница акций и картинка будет браться из БД, как-то не очень красиво если для каждого элемента списка акций в HTML будут прописаны стили style="background-image: ...." . Как можно реализовать это по другому? Размещая в коде тег ?

Заметьте что ширина задаётся в процентах, высоту можно конечно поставить жёсткую или min-height. Как вообще вы поступаете когда надо сверстать нечто подобное?

Comments

[Сергей delphinpro]

как-то не очень красиво если для каждого элемента списка акций в HTML будут прописаны стили style="background-image: ...."

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

[Капитан Какао]

Ни чего не крассивогов этом не вижу, у меня на это сайте так сделано citrus.qsb.su
Да и вообще всегда и везде так делаю. Обычная практика, и очень удобно.

[Александр Андреев]

Сергей: Ну на сколько знаю это моветон =) нас ещё несколько лет назад в одной студии тим-лид гонял чтобы никакоего css в html коде небыло.

[Сергей delphinpro]

Александр Андреев: ну так чем он аргументировал-то?

[Александр Андреев]

Сергей: Сергей честно - не помню =)

[Сергей delphinpro]

Александр Андреев: Делайте бекграундом.
Если позволяет ТЗ - можете запилить тегом img со свойством object-fit

[Александр Андреев]

Rad Cor: Ясно, тогда так и сделаю =)

[Капитан Какао]

Александр Андреев: я обновил ответ добавив ещё один вариант реализации без применения фона.

Answer 1

[Капитан Какао]

Я всегда делаю такие вещи через background, и свойство background-size: cover

https://jsfiddle.net/RadCor/zbrdosjz/

Или можно использовать flex box и как написал Сергей, заюзать object-fit, только одного его будет мало.
В общем вот рабочий вариант, думаю Вам он точно подойдёт, результат такой же как с background-size: cover но без использования backgaround

https://jsfiddle.net/RadCor/2a1duus2/1/

Comments

[Александр Андреев]

о, спасибо! про object-fit впервые слышу, надо проштудировать справку =)

Answer 2

[Mikters Asmavrat]

Придется прописать в<div style="backgr...">
Так картинка будет попадать сразу из базы. Для всех элементов будет одинаковый стиль, кроме url картинки