Картинки CSS/HTML

Картинки CSS/HTML

Простые подсказки по CSS по изображениям, из которых можно узнать, как сделать картинку ссылкой, скруглить углы и добавить фильтры. А так же как сделать изображение адаптивным, задать ширину и многое другое.

Как c помощью css сделать картинки одного размера

Многим разработчикам пригодится этот пример, когда необходимо сделать картинки одного размера на сайте, независимо от размера самой картинки.

Пример

HTML


<div class="block_size">
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
  <div class="block_img">
    <img src="/img.jpg"/>
  </div>
</div>

CSS


.block_size{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.block_img {
  padding: 10%; /* размер картинки */
  position: relative;
  overflow: hidden;
  margin-right: 10px;
}
.block_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}
.block_img img:hover {
  transform: scale(1.1);
}

Как задать фоновое изображение в CSS

Для того, чтобы задать фоновое изображение нужно использовать свойство background для того элемента, которому нужно задать фон картинкой. Фон можно сделать повторяющимся, либо нет.

Пример

HTML


<div class="image-bg"></div>

CSS


.image-bg{
  width: 300px; /* Ширина изображения */
  height: 300px; /* Высота изображения */
  background: url(image.jpg); /* Прописываем путь к файлу */
  background-repeat: no-repeat; /* Не повторяем */
  background-size: cover; /* Размер фона */
  background-position: center; /* Позиция картинкипо центру */
}

Затемнение изображения с помощью CSS

Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.

Пример

Lorem Ipsum

HTML


<div class="section-overlay"><p>Lorem Ipsum</p></div>

CSS


.section-overlay {
    background: url(image.jpg) rgba(0, 0, 0, 0.6); /* Прописываем путь к картинке и задаем цвет и прозрачность */
    background-size: cover; 
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    text-align:center; /* Текст по центру */
    color: #fff; /* Цвет текста */
    padding: 50px 0; /* Отступ сверху и снизу */
}

Как добавить картинку на сайт html с размерами

Для того чтобы добавить картинку на свою веб-страницу или сайт можно применить тег , его атрибут src содержит путь к файлу, как правило, в формате PNG, JPEG или SVG. Также для необходимо указать обязательный атрибут alt, он устанавливает альтернативный текст, который описывает содержание картинки, другими словами в него вписываем то, что отображает картинка. Размеры для изображения можно задать как в пикселях, так и в процентах, более подробно о размерах можно посмотреть на примере.

На данном примере размер картинки задан через атрибут.

Пример

HTML


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как добавить картинку на сайт html</title>
 </head>
 <body>
  <img src="image.jpg" alt="" width="100%"/>
 </body>
</html>>

Адаптивная картинка CSS

Задать ширину изображения можно двумя способами, с помощью CSS и с помощью атрибута width элемента . Достаточно указать только ширину, высоту же браузер изменит автоматически, исходя из пропорций картинки. В некоторых случаях можно задать высоту, либо задать параметр auto. Чтобы изображение было адаптивным желательно задавать ширину в процентах.

В данном примере ширина картинки указана в пикселях, на Рис. 1 добавлен атрибут width, на Рис. 2 картинке присвоен класс и ширина задана с помощью CSS.

Пример

Рис. 1
Рис. 2

HTML


<img src="image.jpg" alt="" width="450px"/> <!-- Рис. 1 -->
<img src="image.jpg" alt="" class="image-width-px"/> <!-- Рис. 2 -->

CSS


.image-width-px{
    width: 450px; /* Рис. 2 */
}

В данном примере ширина картинки указана в процентах, на Рис. 3 добавлен атрибут width, на Рис. 4 картинке присвоен класс и ширина задана с помощью CSS.

Пример

Рис. 3
Рис. 4

HTML


<img src="image.jpg" alt="" width="100%"/> <!-- Рис. 3 -->
<img src="image.jpg" alt="" class="image-width"/> <!-- Рис. 4 -->

CSS


.image-width{
    width: 100%; /* Рис. 4 */
}

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

Чтобы добавить рамку для изображения с помощью CSS можно использовать свойство border, в качестве значения нужно указать толщину рамки, ее стиль и цвет. Стили рамки можно посмотреть на странице генератора границ блока CSS, а так же настроить там нужную рамку и скопировать уже готовый код.

Пример

HTML


<img src="image.jpg" alt="" class="image-border"/>

CSS


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

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

Чтобы задать скругление углов изображению с помощью CSS можно использовать свойство border-radius, можно поставить любое значение, если на сайте такая задумка. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее. Можно воспользоваться генератором скругления углов CSS и скопировать уже готовый код.

Пример

HTML


<img src="image.jpg" alt="" class="image-radius"/>

CSS


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

Как отразить картинку по вертикали и горизонтали CSS

Чтобы отразить картинку по вертикали или горизонтали с помощью CSS можно использовать свойство transform с функцией scale(), отрицательное значение этой функции (-1) позволяет сделать отражение. Написать код CSS можно так:

  • transform: scale(-1, 1) — отражение по горизонтали;
  • transform: scale(1, -1) — отражение по вертикали;
  • transform: scale(-1, -1) (или просто scale(-1)) — одновременное отражение по горизонтали и вертикали.

Вместо scale() можно использовать отдельные функции scaleX() и scaleY(), они отвечают за масштабирование по соответствующим координатам:

  • transform: scaleX(-1) — отражение по горизонтали;
  • transform: scaleY(-1) — отражение по вертикали;
  • transform: scaleX(-1) scaleY(-1) — одновременное отражение по горизонтали и вертикали.

На данном примере показано как отразить картинку по горизонтали используя transform: scaleX.

Пример

HTML


<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="scaleX"/>

CSS


.scaleX {
    transform: scaleX(-1); /* Отражение картинки по горизонтали */
}

На данном примере показано как отразить картинку по вертикали используя transform: scaleY.

Пример

HTML


<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="scaleY"/>

CSS


.scaleX {
    transform: scaleY(-1); /* Отражение картинки по вертикали */
}

Поворот изображения CSS

Чтобы повернуть картинку необходимо применить свойство transform с функцией rotate(), внутри которой нужно указать угол поворота. Для примера ниже показаны различные варианты поворота изображения.

Картинке можно задать разный угол поворота с помощью генератора поворота элемента CSS, и скопировать уже готовый код.

Исходное изображение
transform: rotate(90deg);
transform: rotate(180deg);
transform: rotate(-90deg);

На примере показан поворот картинки на 45 градусов.

Пример

HTML


<img src="image.jpg" alt=""/>
<img src="image.jpg" alt="" class="rotate-right"/>

CSS


.rotate-right {
    transform: rotate(45deg);
}
By julia