Как изменить размер под родителя для картинки, вставленной через CSS?

Ссылка скопирована
11 января 2026 1 ответ

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

Как изменить размер под родителя для картинки, вставленной через CSS?

<div class="card card_2"></div>

.card {   width: 328px;   height: 554px;   margin: auto; }  .card_2 {   background-image: url('/images/card2.jpg');   background-position: cover; /* не работает */ }

.card { width: 328px; height: 554px; margin: auto; } .card_2 { background-image: url('/images/card2.jpg'); background-position: cover; /* не работает */ }

Дополнительно:

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

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

  • это не работает) вставляется только часть картинки в блок
  • а нет, работает! спасибо!
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Павел Админов Ответ

Для изменения размера под родителя для картинки, вставленной через CSS, можно использовать свойство "max-width" и "max-height" в комбинации с процентными значениями или другими единицами измерения. Например, чтобы задать размер картинки относительно размеров родительского элемента, можно использовать следующий CSS код:

.parent {
  width: 300px; /* задаем ширину родительского элемента */
  height: 200px; /* задаем высоту родительского элемента */
  position: relative; /* устанавливаем позицию родительского элемента как относительную */
}
 
.child {
  max-width: 100%; /* задаем максимальную ширину картинки в зависимости от ширины родительского элемента */
  max-height: 100%; /* задаем максимальную высоту картинки в зависимости от высоты родительского элемента */
  position: absolute; /* устанавливаем позицию картинки как абсолютную */
  top: 0; /* выравниваем картинку по верхнему краю родительского элемента */
  left: 0; /* выравниваем картинку по левому краю родительского элемента */
}

.parent { width: 300px; /* задаем ширину родительского элемента */ height: 200px; /* задаем высоту родительского элемента */ position: relative; /* устанавливаем позицию родительского элемента как относительную */ } .child { max-width: 100%; /* задаем максимальную ширину картинки в зависимости от ширины родительского элемента */ max-height: 100%; /* задаем максимальную высоту картинки в зависимости от высоты родительского элемента */ position: absolute; /* устанавливаем позицию картинки как абсолютную */ top: 0; /* выравниваем картинку по верхнему краю родительского элемента */ left: 0; /* выравниваем картинку по левому краю родительского элемента */ }

При использовании вышеприведенного CSS кода, картинка будет автоматически масштабироваться относительно размеров родительского элемента. Обратите внимание, что в данном примере мы использовали процентные значения для максимальной ширины и высоты, но можно также использовать другие единицы измерения, такие как пиксели или em.

Надеюсь, данное объяснение поможет вам изменить размер под родителя для картинки, вставленной через CSS. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно