如何在平板模式下调整图像答案

【问题标题】：How to fit the image in tablet mode如何在平板模式下调整图像
【发布时间】：2019-09-19 22:03:44
【问题描述】：

我正在主页上显示轮播。因此，当我点击平板模式响应时，图像仅显示半屏，如下所示

在我的电脑屏幕上显示正常

我已经尝试了以下代码来使用 styled-components 显示图像

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

使用 LegendImage 我在渲染组件中显示它

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

PS：当你点击图片时，你会知道空白在哪里

【问题讨论】：

【解决方案1】：

不要给出“静态”高度。

我没有测试过，但试试这样的：

$tablet: '767px';

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

【讨论】：

【解决方案2】：

您可以使用@media 进行响应式设计：

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

【讨论】：