Ссылки и изображения / Размеры изображения [10/13]
×

Размеры изображения [10/13]

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Пример:

<img width="100" src="...">

В примере изображению задана ширина 100px. Обратите внимание, что в атрибуте width после цифры нет px. Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

Во втором примере изображению задана относительная ширина, 50 процентов:

<img width="50%" src="...">

Высоту в процентах обычно не задают.

Если задать только один из размеров, ширину или высоту, то вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения.

Если же задать и ширину, и высоту для картинки:

<img width="100" height="100" src="...">

То браузер может нарушить пропорции исходного изображения.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Размеры изображения</title> </head> <body> <h1>Дон Кексоне</h1> <img src="/assets/course4/img1.jpg"> </body> </html>
CSS
HTML Academy

Последовательно задайте разные размеры для изображения Кекса:

  1. Сначала ширину 100 процентов.
  2. Затем ширину 200 пикселей.
  3. Затем ширину и высоту 200 пикселей.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.