Question

我正在学习如何使用Flex Slider制作图像滑块和旋转木马。然而，当所有图像具有完全相同的宽度和高度时，Flex似乎只是好的。

问题可以在以下网站上看到：

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

图像非常大，所以请在装载时保持耐心。

我的测试网站包含几个不同宽度和高度的图像。为了解决这个问题，我必须将它们重新调整为相同的宽度和高度，并且由于宽高比的原因，我还需要将它们居中。

所以，我想知道是否：

Flex Slider有没有办法做到这一点？
有没有办法没有更改库的代码？

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

Fixed size of Flexslider - 此解决方案实际上会将所有图像修剪为定义的大小，忽略宽度 - 高度比率。它还要求我改变库本身。
Make Flex Fit the Users' Screen.. No matter what screen size - 我真的不明白这个适用于Flex Slider：S

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

Answer 1

要解决这个问题我正在使用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;}
}

Answer 2

好吧，我浪费了很多时间，所以我不妨试试我自己的问题。我用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％，并且仅在HORIZONTALLY中居。结果是将它们垂直居中，并根据它们的t

调整它们的大小

Answer 3

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

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

自动调整图像大小以适合Flex Slider

3 个答案: