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-Screen等“普通”屏幕尺寸相同。显然，当屏幕变得太小（例如电话）时，图像看起来会很难看，因为我使用浏览器窗口调整它们的大小。

因此，当屏幕变得太小时，我想在左侧和右侧切割图像（不使用浏览器窗口调整大小），这样就可以看到图像的中心而不是扭曲的图像。

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

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。

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

3 个答案: