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

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

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

Шпаргалка

Свойства width и height управляют размерами области содержимого элемента:

selector {
    width: value;
    height: value;
}

Значения могут быть указаны в пикселях (px), em (em), процентах (%) или использовать auto для автоматического расчета:

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

img {
    width: 100%;
    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>