Как вставить изображение в css

В CSS существует несколько способов вставки изображения. Рассмотрим наиболее распространенные из них.

С помощью свойства background-image

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

HTML:

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

CSS:

.image {
  background-image: url("image.jpg");
  width: 200px;
  height: 200px;
  background-size: cover;
}

В данном примере мы создаем элемент div с классом image и устанавливаем фоновое изображение с помощью свойства background-image. URL-адрес изображения указывается в круглых скобках. Мы также задаем ширину и высоту элемента и используем свойство background-size для настройки размера изображения.

С помощью тега <img>

Вы можете использовать тег <img> для вставки изображения внутри содержимого элемента. В данном случае изображение является частью содержимого элемента, а не используется только для оформления.

HTML:

<div>
  <img src="image.jpg" alt="Картинка">
</div>

CSS:

div {
  width: 200px;
  height: 200px;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

В данном примере мы создаем элемент div и вставляем изображение внутри него с помощью тега <img>. URL-адрес изображения указывается в атрибуте src, а в атрибуте alt указывается альтернативный текст, который будет отображаться в случае, если изображение не загрузится.

Мы также задаем ширину и высоту элемента div и используем свойства max-width и max-height для установки максимально возможных размеров изображения, с учетом размеров элемента. Кроме того, мы используем свойство display со значением block для отображения изображения в виде блочного элемента, чтобы можно было управлять его размерами и положением.