CSS. Размер картинки в зависимости от размера родительского компонента

На каждой странице сайта есть <div>-компонент, который имеет свои свойства: длину и ширину.

	/* Указаны в px */
	block {
	height:400 px;
	width: 400 px;
	}
	/* Зависят от родительского компонента и браузер автоматически расчитывает их для браузера с различным разрешением */
	block {
	height: 90%;
	width: 90%;
	}

view raw widthandheight.css hosted with ❤ by GitHub

	/* Указаны в px */
	<div width="400 px" height="400 px"> ... </div>
	/* Зависят от родительского компонента и браузер автоматически расчитывает их для браузера с различным разрешением */
	<div width="90%" height="90%"> ... </div>

view raw widthandheight.html hosted with ❤ by GitHub

Мы будем использовать второй способ из предыдущих примеров для адаптивного дизайна сайта. Решим следуюшую задачу: необходимо в данный блок вставить любой другой компонент. Это может быть еще один блок <div> или картинка. К ним добавим следующие параментры:

	height: 90%;
	width: 90%;

view raw w&hexample.css hosted with ❤ by GitHub

width="90%" height="90%"

view raw w&hexample.html hosted with ❤ by GitHub

Соотношение в процентах выбирается в зависмости от требуемого результата. Мы можем определить свой стиль, который в последствии можем добавить к любому другому элементу страницы. В нашем случае мы создаем новый класс block в файле .css, а затем редактируем файл .html.

<div class="block">...</div>

view raw main.html hosted with ❤ by GitHub

	block {
	height: 90%;
	width: 90%;
	}

view raw style.css hosted with ❤ by GitHub