javascript - 自动调整图像大小以适合 Flex 滑块

Question

我正在学习如何使用Flex Slider制作图像滑块和轮播。然而，只有当所有图像的宽度和高度完全相同时，Flex 才显得很好。

该问题可以在以下网站中看到：

https://dl.dropboxusercontent.com/u/785815/bastion/index.html

图片比较大，加载时请耐心等待。

我的测试网站包含几张不同宽度和高度的图片。为了解决这个问题，我必须重新调整它们的大小以使其具有相同的宽度和高度，并且由于宽高比，我还需要将它们居中。

所以，我想知道是否：

Flex Slider 有没有办法做到这一点？
有没有办法在不更改库代码的情况下做到这一点？

为了回答这个问题，我找到了以下文章：

Flexslider 的固定尺寸- 此解决方案实际上会将所有图像修剪为定义的尺寸，忽略宽高比。它还需要我更改库本身。
使 Flex 适合用户的屏幕.. 无论屏幕尺寸如何 - 我真的不明白这个如何适用于 Flex Slider ：S

我感谢任何可能的帮助，佩德罗。

score 3 · Accepted Answer

为了解决这个问题，我正在使用 CSS——我认为最快和最简单的方法......

@media only screen and (max-width: 480px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}

score 3 · Accepted Answer

好吧，我浪费了很多时间，所以我不妨在我自己的问题中尝试一下。我正在用 css3 解决这个问题：

@media only screen and (min-width: 959px) {
    .img {
        max-width: 50%;
        max-height: 50%;
        display: block;
        margin-left: auto;
                margin-right: auto;
    }
}

在这种情况下，如果用户的物理屏幕宽度 > 959px（我的有），这将是应用于所有图像的 css。以下 HTML 说明了这一点：

<ul class="slides">
                    <li>
                            <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_0_Foreward.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_Calamity.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_CalamityKid.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_ColdWarKid.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_KidThinking.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_KidVsScumbag.png" />
                    </li>
                </ul>
            </div>

这会将所有图像的大小（忽略大小差异）调整为原始大小的 50%，并且只会水平居中。事实证明，将它们垂直居中，并根据它们的 t 调整它们的大小

score 0 · Accepted Answer

或者，您可以通过将以下属性添加到现有选择器来裁剪图像：

.flexslider .slides > li {
  overflow:hidden;
  position:relative;
  height:400px; /* desired height here */
}
.flexslider .slides img {
  height:auto;
}

javascript - 自动调整图像大小以适合 Flex 滑块

3 回答 3

Related

Reference