Масштабування зображень щодо їх початкового розміру не дуже хороша ідея, хоча б тому, що якість картинки дуже сильно погіршується. Тим не менш, для деяких видів зображень, наприклад, містять геометричні фігури або абстракцію, масштабування можна застосовувати цілком ефективно.
Ілюстрації до тексту часто вирівнюють по центру веб-сторінки, при цьому текст розташовується до і після зображення. Таке розташування елементів дає змогу розбити великий текст на смислові блоки та привернути увагу до малюнків.
Спочатку розглянемо вирівнювання зображення по центру. Для цього до селектору P слід застосувати стильове властивість text-align зі значенням center. При цьому тег <img> повинен розташовуватися всередині абзацу (тег <p>). Щоб не вийшло так, що всі абзаци на сторінці почали вирівнюватися по центру, введемо свій клас figure, і всі дії будемо проводити з ним. У прикладі 1 показано, як це зробити.
Обтікання зображення текстом зазвичай використовується для компактного розміщення матеріалу та зв'язування між собою ілюстрацій і тексту. Саме обтікання створюється з допомогою стильового властивості float, який додається до селектору IMG. Значення left вирівнює зображення по лівому краю, right — по правому. Обтікання при цьому відбувається за іншим, вільним сторонам (приклад 1).
Підпис під фотографією зазвичай застосовується для коментування зображення і короткого опису. Хоча додати підпис можна за допомогою звичайного абзацу, цей спосіб не працює, як тільки фотографію необхідно розташувати по правому або лівому краю веб-сторінки. Підпис має бути нерозривна з зображенням, незалежно від способу його розташування на сторінці.
За замовчуванням, фотографія на сторінці розташовується по лівому краю вікна браузера, а довколишній текст вирівнюється по нижній кромці зображення. Щоб задати вирівнювання по правому краю для селектора IMG слід встановити стильове властивість float зі значенням right.
Розташування зображень друг під іншому часто продиктовано вимогами дизайну, коли необхідно «склеїти» без швів кілька зображень в одну цілісну картину. Зазвичай для перенесення тексту, а також зображень на інший рядок застосовується тег <br> або контейнер фіксованого розміру, але в тому й іншому випадку є свої особливості.
Зображення відносяться до вбудованими елементами, тому написання в коді декількох тегів <img> поспіль автоматично вибудує картинки по горизонталі. Тим не менш, за допомогою стилів цим побудовою можна керувати більш витончено.