Ширина и высота

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 37 из 76.

В CSS свойства width и height используются для задания размеров области содержимого элемента. Эти свойства необходимы для управления размером и расположением элементов на ваших веб-страницах.

Вот базовый синтаксис использования свойств width и height:

selector {
    width: value;
    height: value;
}

width: ширина области содержимого элемента.

height: высота области содержимого элемента.

value: Желаемое значение ширины или высоты, которое можно указать в пикселях (px), em (em), процентах (%) или других допустимых единицах CSS. Также можно использовать ключевое слово auto, чтобы браузер автоматически вычислил ширину или высоту на основе содержимого.

Например:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

В этом примере все элементы <div> имеют ширину 300px и высоту 200px, а все элементы <img> имеют ширину, занимающую 100% ширины родительского элемента, и высоту, которая автоматически рассчитывается для сохранения соотношения сторон.

Задание

Легко

Вам дан HTML-документ с элементом division (<div>) и изображением (<img>). Ваша задача — использовать свойства width и height, чтобы задать размеры этих элементов. Выполните следующие шаги:

Напишите правило CSS, нацеленное на элемент <div>. Установите значение width равным 400px, а значение height — 250px.
Напишите правило CSS, нацеленное на элемент <img>. Установите значение width равным 300px, а значение height — auto.

Попробуйте сами

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>