具有响应宽度和固定高度的滑块答案

【问题标题】：Slider with responsive width and fixed height具有响应宽度和固定高度的滑块
【发布时间】：2015-12-27 18:12:59
【问题描述】：

我正在开发一个网站，我需要将图像滑块作为标题。我希望幻灯片是页面的整个宽度，并且具有保持固定的高度（可能使用视口单位）。理想情况下，它会随着视口变窄而裁剪图像宽度。我曾多次尝试使用几个不同的滑块插件（Owl Carousel、Slippry 和 Flexslider 2）来实现这一点，但没有任何效果。现在我通过创建 3 个不同的幻灯片（1 个用于台式机，1 个用于平板电脑，1 个用于移动设备）然后使用媒体查询来显示或隐藏每个幻灯片，但这意味着浏览器必须加载幻灯片 3不同的时间，导致我的页面加载时间非常高。

实现我想要的最佳方式是什么？

【问题讨论】：

你有没有尝试过？
请包含演示您当前实现的相关代码，以便我们更好地了解您是如何处理此问题的（而不是从头开始制定解决方案）。
回答您的问题可能有点晚了，但请查看 smoothdivscroll.com 看看这是否与您尝试做的事情更一致。

标签： jquery html css responsive-design slider

【解决方案1】：

最简单的解决方案是使用带有background-size: cover 的背景图像。这将使图像足够大，以填满整个幻灯片，并裁剪任何额外的宽度或高度。

如果您想使用img，另一种选择是绝对定位图像，然后使用 CSS 将其居中。这有时会导致信箱化，具体取决于图像的纵横比，但 CSS 看起来像这样：

.slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
}

这将产生一个高度填满幻灯片的图像，并且在幻灯片中垂直和水平居中（您可能需要 transform 的供应商前缀，具体取决于您需要支持的浏览器）。

这些解决方案中的任何一个都应适用于任何尺寸的响应式幻灯片。

【讨论】：

谢谢！ background-size:cover 方法效果很好！我从来没有想过这样做......

【解决方案2】：

我认为您正在寻找这样的东西。这个也将在小型设备和平板电脑上工作。您也可以在同一页面上有多个轮播。只需复制“DIV”-“SpecDataWrap”并更改 ID。

<div class="ContainerWrap">
    <div class="Container">
        <div class="AllSpecsDataWrap">
            <div class="SpecDataWrap" id="SpecDataWrap1">
                <div class="SpecDataSlides activeNavSlide">
                    <img src="http://s19.postimg.org/lzem156s3/image1.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/6cira13mb/image2.jpg" />
                    <div class="SpecDesc SpecDescLeft">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecDataSlides InActiveNavSlide">
                    <img src="http://s19.postimg.org/f4zpxpor7/image3.jpg" />
                    <div class="SpecDesc SpecDescRight">
                        <h2>Choose to be unique.</h2>
                        <div class="SpecDescDetails">
                            Metal accents, colorful hues, real woods and leathers, and a customizable laser-etched signature offer thousands of ways to make your Moto X unique.
                        </div>
                    </div>
                </div>
                <div class="SpecSlideNavigation">
                    <div class="leftNavSpec SpecSlideNav"></div>
                    <div class="bulletsNavSpec">
                        <ul>
                            <li class="activeImage"></li>
                            <li class="InActiveImage"></li>
                            <li class="InActiveImage"></li>
                        </ul>
                        <div class="clearFix"></div>
                    </div>
                    <div class="RightNavSpec SpecSlideNav"></div>
                </div>
                <div class="clearFix"></div>
            </div>
        </div>
    </div>
</div>

您可以在此处查看 JS 和 CSS 代码： https://jsfiddle.net/raju_sumit/Ld21vutz/

【讨论】：