自动调整图片大小以适应Flex Slider

Question

我正在学习如何使用Flex Slider制作图像滑块和旋转木马。然而，当所有图像的宽度和高度完全相同时，Flex似乎只能发挥其最佳效果。

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

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

这些图片非常大，所以加载时请耐心等待。

我的测试网站包括多个不同宽度和高度的图像。为了解决这个问题，我需要调整它们的大小，使它们具有相同的宽度和高度，并且还需要居中它们，因为宽高比例不同。

所以，我想知道：

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

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

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

感谢任何可能的帮助，Pedro。

- Flame_Phoenix

---

您不应该链接到像Dropbox这样的在线存储中的文件，因为该文件可能会在未来被删除；因此，对于寻找解决方案的社区来说并没有好处。请在将来使用在线代码编辑器（例如jsfiddle）复制问题。 - Studocwho

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;}
}

- WaPaRtY

---

那怎么才能让图片居中呢？我得试试，谢谢你的尝试！ - Flame_Phoenix

这可能会改变您在不同分辨率下的图像或幻灯片大小，因此您可以根据需要修改所有内容 :) 此外，您还可以添加更多的CSS并在此处进行更多自定义设置，而不仅仅是更改图像大小。我正在使用这个CSS3来进行响应式设计，希望这能有所帮助... 如果您有更多问题，请随时提问... - WaPaRtY

好的，你的解决方案允许我根据用户的物理屏幕尺寸绘制不同的东西。然而，我仍然不知道如何处理我有几个具有非常不同大小的图像这一事实。在css中是否有一种自动调整大小基于宽高比的方法？ - Flame_Phoenix

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％，并仅将它们水平居中。结果证明，要使它们垂直居中并根据其文本宽度调整大小是有些困难的。

- Flame_Phoenix

Answer 3

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

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

- SuN