自动调整图像大小以适合Flex Slider [英] Automatically resize image to fit Flex Slider

问题描述

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

I am learning how to use Flex Slider to make image sliders and carousels. However, Flex only seems to be good when all the images are of the exact same width and height.

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

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

The problem can be seen in the following website:

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

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

The images are quite big, so please be patient while loading.

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

My test website includes several images, with different width and height. To fix this I have to re-size them to have the same width and height, and I also need to center them because of the width-height ratios.

所以，我想知道是否：

1. 有没有办法Flex Slider要做到这一点吗？


2. 有没有办法没有更改库的代码？

1. Is there a way for Flex Slider to do this?
2. Is there a way to do it without changing the library's code?

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

To answers this question, I found the follow articles:

• Flexslider的固定大小 - 此解决方案实际上将所有图像修剪为定义的大小，忽略宽度 - 高度比率。它还要求我自己更改库。


• 使Flex适合用户的屏幕..无论屏幕大小是什么 - 我真的不明白这个适用于Flex Slider：S

• Fixed size of Flexslider - This solution will actually trim all the images to the defined size, ignore width-height ration. It also requires me to change the library itself.
• Make Flex Fit the Users' Screen.. No matter what screen size - I don't really understand how this one applies to Flex Slider :S

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

I appreciate any possible help, Pedro.

推荐答案

嗯，我浪费了很多时间，所以我不妨试试我自己的问题。
我用css3解决了这个问题：

Well, I wasted a lot of time with this, so I might as well give it a try in my own question. I am solving this issue with 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说明了这一点：

In this case, if the physical screen of the user had width > 959px (mine has) this will be the css applied to all the images. The following HTML illustrates this:

<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

This will resize ALL IMAGES (ignoring size difference) to 50% of their original size, and will only center then HORIZONTALLY. Turns out that to center them vertically, and to resize them depending on their t

这篇关于自动调整图像大小以适合Flex Slider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！