当屏幕变得太小时，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 slider 代码的工作方式正是我想要的“正常”屏幕尺寸，如 iPad-Pro 和 PC-Screen。 显然，当屏幕变得太小(例如手机)时，图像看起来会很难看，因为我使用浏览器窗口调整了它们的大小。

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

我尝试用变换解决我的问题，但我无法完成它，因为我尝试的一切都毁了 slider 。 你们还有其他想法吗？

Answer 1

更新:

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

@media 

对于不同的屏幕尺寸(我只是使用不同尺寸的相同图片)和

background-position:center;

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