Css 如何在平板电脑模式下调整图像

我正在主页上显示旋转木马。因此，当我点击平板电脑模式时，图像只显示半个屏幕，如下图所示

在我的电脑屏幕上，它可以正常显示

我已经尝试了下面的代码来使用样式化组件显示图像

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

使用该

LegendImage

我将其显示在渲染组件中

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

注：当你点击图片时，你会知道空白的位置。不要给出“静态”高度

我没有测试过，但可以尝试以下方法：

$tablet: '767px';

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

---

您可以使用

@media

进行响应性设计：

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