当屏幕变得太小时时，HTML/CSS 从左右裁剪图像

Question

首先...我是全新的，所以如果我忘记了一些可以帮助您回答我的问题的重要内容，我深表歉意。我会尽力的。

这是我的代码：

HTML：

<div class="slider">
    <figure>
        <div>
            <img src="a.jpg">
        </div>
        <div>
            <img src="b.jpg">
        </div>
        <div>
            <img src="c.jpg">
        </div>
    </figure>
</div>

还有 CSS：

@media screen and (max-width: 550px) {

.slider figure div{
    width: 20%;
    float: left;
}

.slider figure img{
    min-height: 100%;
    min-width: 100%;
    max-height: 100%;
    max-width: 100%;    
}


.slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation-name: slidy;
    animation-iteration-count: infinite;
    animation-duration: 15s;
}


@keyframes slidy{

    0%{
        left: 0%;
    }

    31%{
        left: 0%;
    }
    35%{
        left: -100%;
    }
    66%{
        left: -100%;
    }
    70%{
        left: -200%;
    }
    95%{
        left: -200%;
    }
    100%{
        left: 0;
    }
}
}

CSS 滑块代码的工作方式与我想要的“正常”屏幕尺寸（如 iPad-Pro 和 PC 屏幕）相同。 显然，当屏幕变得太小（例如电话）时，图像会看起来很难看，因为我使用浏览器窗口调整它们的大小。

所以当屏幕变得太小时，我想在左侧和右侧剪切图像（不使用浏览器窗口调整大小），以便能够看到图像的中心而不是扭曲的图片。

我尝试使用转换解决我的问题，但我无法完成它，因为我尝试的所有操作都破坏了滑块。 大家还有什么想法吗？

Answer 1

更新：

如果有人遇到与我相同的问题...这是我的解决方案。 我使用了背景图片。所以我能够使用

@media 

针对不同的屏幕尺寸（我只是使用了不同尺寸的同一张图片）和

background-position:center;

因此图像从左侧和右侧被裁剪。 再次感谢您的所有帮助！

Answer 2

.slider figure img{

 min-width: 50px !important;

}

.slider figure {

text-align:center  !important; 
over-flow:hidden  !important;    

}

Answer 3

在该媒体查询中，您将图像的宽度设置为 100%；所以它会随着浏览器窗口的大小而调整。您可以删除它，也可以通过添加 text-align: center; 来使图像居中。给父母。但是，一旦浏览器窗口变得比 img 小，就会出现溢出滚动。

.slider figure div{
    width: 20%;
    float: left;
    text-align: center;
}

.slider figure img{

}

如果您希望此溢出图像始终居中，则需要一些 javascript。