Как можно изменить размер изображения, вставленного при помощи CSS, чтобы оно соответствовало размеру родительского элемента?

Question

Jack

html , css

Как можно изменить размер изображения, вставленного при помощи CSS, чтобы оно соответствовало размеру родительского элемента?

Как я могу настроить изображение, добавленное через CSS, чтобы оно подстраивалось под размер блока карточки, а не растягивалось? Код с background-position: cover не помогает, изображение все равно не подстраивается под размер родительского элемента. Одновременно, вот пример кода, который я использовал:


```css
.card {
  width: 328px;
  height: 554px;
  margin: auto;
}

.card_2 {
  background-image: url('/images/card2.jpg');
  background-size: cover;
}
```

22 декабря 2023 г. 13:47

Ответы на вопрос 2

Похожие вопросы

Answer 1

Если вы хотите изменить размер изображения фонового элемента, чтобы оно соответствовало размеру родительского элемента, вы можете использовать свойство `background-size: contain;` вместо `background-size: cover;`. Таким образом, изображение будет подстраиваться под размер родительского элемента и не будет растягиваться:

```css
.card_2 {
  background-image: url('/images/card2.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
```

Теперь изображение будет соответствовать размеру блока `card_2`.

Answer 2

.card_2 {
  background-image: url('/images/card2.jpg');
  background-size: cover; /* работает */
}