Как адаптировать картинку при верстке сайта?

Question

[Kir]

Доброго времени.
Верстаю шапку сайта.
У блока header установлен background . По задумке картинка должна всегда умещаться и масштабироваться под экраны мониторов. Но на практике не так.
Нужен совет как можно адаптировать картинку шапки чтобы она всегда вся входила в монитор. Спасибо

Comments

[Ankhena]

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

Answer 1

[Kir]

https://codepen.io/Kiri9IH/pen/vbbWWq
Добавил небольшой скрипт на страницу теперь масштабирует нормально.

<script>
			scale = function(){
				fild1=document.querySelector("header");
				fild1.style.height =  (window.innerWidth * 1152 / 2048)  +"px"; // 1152 и 2048 - разрешение картинки
			};
			window.onresize = scale;
			window.onload   = scale;
		</script>

Answer 2

[KononovD]

bacground-size: cover; решит вашу проблему)

так же можно его задавать и через
background: url("путь") no-repeat center ceneter / cover;

только что подумал, что такой подход будет работать только, если у шапки height:100vh

Comments

[Kir]

В том и дело что не решает.

Чтобы на маленьком мониторе все разместилось нормально нужно уменьшить значение свойства min-height.
Я так полагаю можно использовать медиа запросы . Но может еще как то можно сделать ?

[KononovD]

Kir, а зачем вам min-height?
может я неправильно понял задачу.. можно макет глянуть?

[KononovD]

Kir, https://codepen.io/Kononov_D/pen/YBBNgz
вот, при любом разрешении картинка на все рабочее пространство растягивается

[Максим]

KononovD, а если использовать абсолютно спозиционироанную картинку и object-fit:contain ?
https://codepen.io/topicstarter/pen/vbbxzm

[Kir]

https://codepen.io/Kiri9IH/pen/vbbWWq?editors=1100

[KononovD]

Максим Ленский, к сожалению, не знал что такое object-fit
Но опять же, насколько я погуглил - object-fit все равно задается в рамках враппера, но при этом появляется лишний элемент в html, #ящитаю, что в этом не много смысла и / cover делает то же самое, при этом в html чисто)

[KononovD]

Kir, я не понимаю зачем вам max-width и явно заданная высота в пикселах.. 100vh и все, вообще в любое время ваш хедр занимает 100% высоты экрана и картинка растягивается..

background-repeat:no-repeat;
background-position:center top;
background-size:cover;

можно задать через одно свойство:
background: url("путь до картики") no-repeat center top / cover;

Answer 3

[arzamas-nick]

На маленьких экранах вам эта картинка не подойдет с такими же размерами. Нужно уменьшить картинку для начала и через media запрос менять url ссылки на картинку.
Сейчас я так полагаю у вас картинка для десктопного экрана.