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

Question

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

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

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

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

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

所以，我想知道是否：

1. Flex Slider有没有办法做到这一点？
2. 有没有办法在不更改库代码的情况下执行此操作？

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

• Flexslider的固定大小 - 此解决方案实际上将所有图像修剪为定义的大小，忽略宽度 - 高度比率。 它还要求我改变库本身。
• 使Flex适合用户的屏幕..无论屏幕尺寸如何 - 我真的不明白这个适用于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;
}