Ширина зображення задається за допомогою атрибута width елемента <img>. Достатньо вказати тільки ширину, висоту ж браузер змінить автоматично, виходячи з пропорцій картинки (приклад 1).
Приклад 1. Атрибут width
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширіна</title> </head> <body> <img src="image/spam.jpg" alt="Спам" width="500"> </body> </html>
Через атрибут width можна задавати довільне значення, при цьому як збільшувати зображення, так і зменшувати його. Це зазвичай робиться для підвищення якості зображення на дисплеях Retina.
Через стилі зручно задавати розмір відразу для безлічі зображень. Спочатку додаємо до <img> бажаний клас, а в ньому пишемо властивість width із зазначеною шириною.
Приклад 2. Властивість width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширіна</title> <style> .w { width: 500px; }
</style>
</head>
<body> <img src="image/spam.jpg" alt="Спам" class="w">
</body>
</html>У даному прикладі до <img> додається клас w, в якому задана ширина 500 пікселів.">