Как сделать адаптивное фоновое изображение?

Question

[Yurii]

У меня есть div, в котором я хочу сделать изображение jpg фоном. При этом оно должно быть адаптивным. Возможно ли это сделать без применения медиа запросов ?
Я задаю параметр background-size: cover и в этом случае, картинка по высоте обрезается. Полная высота картинки появляется только тогда, когда я задаю высоту жестко height: 750px. И когда в инспекторе кода уменьшаю экран, то картинка не сжимается, а просто обрезается по краям.
Вот мой код:

.container-tech
margin-top: 50px
background: url(../img/slayd11.jpg) no-repeat center
background-size: cover

.container-tech__darkened
height: 100%
width: 100%
background-color: rgba(43,43,43,.48)
background-size: content

На фоновое изображение накладываю затемнение.
Подскажите, как сделать адаптивным фоновое изображение и чтобы высота картинки не обрезалась.

Comments

[Rustam Bainazarov]

background-size: content

Такого значения у этого свойства нет. Есть contain.

[Yurii]

Рустам Байназаров, возможно, но сейчас дело не в нём ... это блок затемнения фона

Answer 1

[Sergey Mukhin]

Нужно чтобы изображение всегда было от левого края до правого, а высота пропорционально изменялась?
Придётся высоту блока высчитывать и изменять через js.
Или используйте img с width: 100% как подкладку.

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

Comments

[Yurii]

Как подкладку это как ?
Сейчас получается так, что изначально изображение расположено по центру блока, а высота картинки снизу и сверху выходит за края блока. Потом при сжимании экрана эти края появляются относительно сжимания. То есть при ширине 1880 картинка в блоке не вся, когда начинаю уменьшать размер экрана, то картинка уменьшается и появляется вся при размере 1404 и потом при дальнейшем уменьшении размера экрана, она просто обрезается. Когда размер доходит до 940, происходит увеличение в высоту и дальше обрезается с боков при уменьшении размера экрана, до 394 и потом снова увеличение изображения, того что осталось на экране и обрезание с боков.
А как добиться того, чтобы картинка плавно изменяла свои размеры при уменьшении экрана и при этом не обрезалась ?

.container-tech
	margin-top: 40px
	border: solid 1px black
	background: url(../img/slayd11.jpg) no-repeat center
	width: 100%
	background-size: cover
	
.container-tech__darkened
	height: 100%
	width: 100%
	background-color: rgba(43,43,43,.48)
	background-size: content

[Yurii]

Скрины

[Yurii]

В приоритете изображение.

[Sergey Mukhin]

Yurii, если смотреть по скрину, я бы не использовал background, а использовал img с шириной 100%. Тогда изображение будет растягивать контейнер в котором находится, а пропорции изображения соблюдаться без обрезания.
В тот же контейнер где img находится, добавляем div с position: absolute в который пишите свой текст что у вас на эскизе поверх изображения. Останется поиграть с выравниванием этого блока относительно родителя и возможно с z-index.

[Yurii]

А как быть с затемнением в этом случае ? Наложить фоном на картинку через z-index, чтобы оно стало поверх изображения ?

[Rustam Bainazarov]

Yurii, если нужны скошенные блоки, то вот ещё вариант:
Как сделать скошеные блоки?

[Sergey Mukhin]

Yurii, проще задать контейнеру нужный цвет фона, а img сделать полупрозрачным через opacity.

[Yurii]

Sergey Mukhin, Может ещё подскажете, как сделать чтобы текст не выходил за пределы блока при уменьшении размера экрана ?

[Sergey Mukhin]

Yurii, как я говорил придётся выбирать, изображение или текст.
Текст уменьшать через медиа-запросы: https://jsfiddle.net/amc457uh/4/

[Yurii]

Sergey Mukhin, Эх, не получается так, как надо. Изображение получается тусклое, а когда оно стояло фоном, то цвета были яркими и затемнение накладывалось сверху, чтобы цвет текста не сливался с белым цветом на картинке. Похоже надо как-то делать, чтобы картинка была фоном...

[Sergey Mukhin]

Yurii, странно. Вроде бы при обычной прозрачности всё равно кто с верху кого если противоположное значение использовать.