Как подогнать изображение в режиме планшета

Question

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

.

На экране моего компьютера оно отображается правильно

Я попробовал приведенный ниже код для отображения изображения с использованием стилевых компонентов

    export const LegendImage = styled.img`
    height: 500px;
    object-fit: cover;
     `

Используя это LegendImage, я отображаю его в компоненте рендеринга

<LegendImage src={item.banner.data.full_url} alt={item.title} />

PS: Когда вы нажмете на изображение, вы узнаете, где пробел

Answer 1

Вы можете использовать @media для адаптивного дизайна:

@media (min-width: 767px) {
   width: 100%;
   height: 100%;
}

Answer 2

не дают "статическую" высоту.

Я не проверял это, но попробуйте что-то вроде этого:

$tablet: '767px';

@media (max-width $tablet) {
   height: 100%;
   width: 100%;
   margin: auto !important;
}