Атрибут class тега <img>
Описание
Атрибут class назначает один или несколько классов элементу <img> для стилизации через CSS или взаимодействия через JavaScript. Классы позволяют группировать изображения и управлять их оформлением.
<img
src="photo.jpg"
alt="Пример фотографии"
class="thumbnail bordered rounded"
width="200">
Основные возможности:
| Применение | Пример | Описание |
|---|---|---|
| Стилизация | .thumbnail { max-width: 100%; } |
Изменение внешнего вида изображения |
| JavaScript-селекторы | document.querySelectorAll('.bordered') |
Выбор и манипуляция изображениями |
| Состояния | class="active" |
Изменение состояния изображения |
Пример стилизации через классы:
<style>
.gallery-image {
width: 300px;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.bordered {
border: 3px solid #3498db;
border-radius: 8px;
}
.hover-zoom:hover {
transform: scale(1.05);
}
</style>
<img
src="nature.jpg"
alt="Природа"
class="gallery-image bordered hover-zoom">
Рекомендации по именованию:
- Используйте осмысленные имена классов (не "img1", "img2")
- Придерживайтесь единого стиля (BEM, kebab-case)
- Разделяйте слова дефисами (
product-image) - Избегайте избыточных классов
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Максимальная длина значения - около 65535 символов
- Чувствительность к регистру зависит от DOCTYPE
- Для сложных проектов используйте CSS-модули
Примечание: Атрибут class - это основной инструмент для управления внешним видом изображений. Для больших проектов рассмотрите использование методологий именования (BEM) или CSS-in-JS решений для лучшей масштабируемости.