Стили изображения

---

Нет комментариев.

---

Адаптивность картинки - возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками и размерами экранов.


img {
width: 100%;
height: auto;
}



Разместить текст на картинке - текст будет находиться над картинкой.


<style>
/* Картинку и текст помещаем в контейнер */
.container {
position: relative;
text-align: left;
color: white;
}
/* Стили для текста */
.text-block {
position: absolute;
bottom: 8px;
left: 16px;
}
</style>

<div class="container">
<img src="css.jpg" alt="Картинка">
<div class="text-block">Это наш текст</div>
</div>



Изменить размер картинки при наведении на неё курсора мыши - наведите курсор на изображение.


<style>
.img-scale {
transition: 1s; /* Время эффекта */
}
.img-scale:hover { transform: scale(1.2); /* Увеличиваем масштаб */
}
</style>


<img src="css.jpg" alt="Картинка" class="img-scale">


Увеличить изображение, не увеличивая при этом размеры картинки.


<style>
.img-scale2 {
display: inline-block; /* Строчно-блочный элемент */
overflow: hidden; /* Скрываем всё за контуром */
}
.img-scale2 img {
transition: 1s; /* Время эффекта */
display: block; /* Убираем небольшой отступ снизу */
}
.img-scale2 img:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
</style>


<div class="img-scale2">
<img src="css.jpg" alt="Картинка">
</div>



Рамка вокруг картинки.


<style>
.image-border {
border: 10px solid #56382d; /* Ширина, стиль и цвет рамки */
}
</style>


<img src="css.jpg" alt="Картинка" class="image-border">



Скругление углов картинки.


<style>
.iimage-radius {
border-radius: 10px; /* Скругление углов изображения */
border: 5px solid #bbb; /* Цвет и ширину рамки */
box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */
}
</style>


<img src="css.jpg" alt="Картинка" class="image-radius">



Отражение по горизонтали.


<img src="css.jpg" alt="Картинка" >
<img src="css.jpg" alt="Картинка" style="transform: scaleX(-1);">



Отражение по вертикали.


<img src="css.jpg" alt="Картинка" >
<img src="css.jpg" alt="Картинка" style="transform: scaleY(-1);">



Поворот изображения - в данном случае, поворот на 45 градусов, можно 180 и -90 градусов.


<img src="css.jpg" alt="Картинка" style="transform: rotate(45deg);">



Чёрно-белая и цветная картинка - по умолчанию картинка серая, при наведении курсора - становится цветной.


<style>
.grey-image {
filter: grayscale(1); /* Черно-белый фильтр для изображения */
transition: 1s; /* Время изменения цвета изображения */
}
.grey-image:hover {
filter: grayscale(0); /* Цветное изображение при наведении */
}
</style>


<img src="css.jpg" alt="Картинка" class="grey-image">



Круглое изображение - круглым изображением можно сделать квадратную картинку, если картинка прямоугольная, то изображение будет овальным.


<style>
.circle {
border-radius: 50%; /* Скругление углов изображения */
border: 5px solid #fff; /* Цвет и ширину рамки */
box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */
}
</style>


<img src="css.jpg" alt="Картинка" class="circle">