Адаптация шапки и всё её содержимое.

[DivMan]

Есть такая проблема, при сужении сайта изображение уменьшается, то сама высота блока не изменяется и получается пустое место, как сделать, что бы блок тоже уменьшался и нижний блок в жёлтом фоне нормально подстраивался, прописать медиазапросы, для каждого пикселя?

https://jsfiddle.net/hqdd5two/

 

[swandev]

19 минут назад, DivMan сказал:

Есть такая проблема, при сужении сайта изображение уменьшается, то сама высота блока не изменяется и получается пустое место, как сделать, что бы блок тоже уменьшался и нижний блок в жёлтом фоне нормально подстраивался, прописать медиазапросы, для каждого пикселя?

https://jsfiddle.net/hqdd5two/

 

Можно так например https://jsfiddle.net/8spzgove/

Или так https://jsfiddle.net/aeqn87es/1/

[psywalker]

21 минуту назад, DivMan сказал:

Есть такая проблема, при сужении сайта изображение уменьшается, то сама высота блока не изменяется и получается пустое место, как сделать, что бы блок тоже уменьшался и нижний блок в жёлтом фоне нормально подстраивался, прописать медиазапросы, для каждого пикселя?

https://jsfiddle.net/hqdd5two/

 

Прописать медиазапросы для каждого пикселя, вы что, самоубица, что ли? Используйте элемент <img> вместо CSS-свойства background.

[DivMan]

Только что, psywalker сказал:

Прописать медиазапросы для каждого пикселя, вы что, самоубица, что ли? Используйте элемент <img> вместо CSS-свойства background.

Если сгенерировать для каждого пикселя, то это не долго. 

Так ведь для img тоже надо задавать высоту 

[DivMan]

Спасибо 

 

Я вот такой способ попробовал

 

<?php
	$height = 500;
	for($i = 1280; $i > 900; $i--) {
		echo "@media only screen and (max-width: $i"."px) {
		 .main-header {
			height: $height"."px;
		 }
		 .inner-header {
			height: $height"."px;
		 }
		}<br>";
		$height = $height - 1;
	}
?> 

 

Edited July 31, 2017 by DivMan

[Xandrito]

Можно еще вот так.

Выставляем паддинг в нужном соотношении сторон.

https://jsfiddle.net/u6tuu3a5/