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

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

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

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