Атрибут style тега <img>
Описание
Атрибут style позволяет задавать CSS-стили непосредственно для элемента <img>. Эти стили применяются только к конкретному изображению и имеют высокий приоритет.
<img
src="photo.jpg"
alt="Пример стилизованного изображения"
style="width: 100%; max-width: 600px; border: 2px solid #3498db; border-radius: 8px;"
loading="lazy">
Часто используемые CSS-свойства:
| Свойство | Пример | Применение |
|---|---|---|
| width/height | width: 100%; height: auto; |
Контроль размеров изображения |
| border | border: 3px dashed #e74c3c; |
Оформление рамки |
| object-fit | object-fit: cover; |
Контроль заполнения области |
| filter | filter: grayscale(50%); |
Графические эффекты |
Адаптивное изображение с встроенными стилями:
<img
src="landscape.jpg"
alt="Адаптивный пейзаж"
style="
width: 100%;
max-width: 800px;
height: auto;
display: block;
margin: 0 auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
">
Динамическое изменение стилей:
<img
id="styledImage"
src="product.jpg"
alt="Товар"
style="transition: all 0.3s ease; cursor: pointer;"
onclick="applyEffect()">
<script>
function applyEffect() {
const img = document.getElementById('styledImage');
img.style.transform = 'scale(1.05)';
img.style.boxShadow = '0 8px 16px rgba(0,0,0,0.2)';
img.style.filter = 'brightness(110%)';
}
</script>
Рекомендации по использованию:
- Используйте для разовых стилевых правок
- Избегайте !important во встроенных стилях
- Для сложного оформления используйте внешние CSS-файлы
- Сочетайте с атрибутами width/height для CLS-оптимизации
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Приоритет выше чем у внешних стилей (кроме !important)
- Не поддерживает псевдоклассы (:hover) и медиазапросы
- Усложняет поддержку кода при массовом использовании
Примечание: Встроенные стили полезны для быстрых прототипов и уникальных случаев, но для production-кода рекомендуется использовать внешние CSS-файлы или CSS-модули. Исключение - динамические стили, генерируемые JavaScript.