javascript 自动调整图像大小以适合 Flex Slider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16402502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically resize image to fit Flex Slider
提问by Flame_Phoenix
I am learning how to use Flex Sliderto make image sliders and carousels. However, Flex only seems to be good when all the images are of the exact same width and height.
我正在学习如何使用Flex Slider制作图像滑块和轮播。但是，只有当所有图像的宽度和高度都完全相同时，Flex 才显得不错。
The problem can be seen in the following website:
问题可以在以下网站中看到：
https://dl.dropboxusercontent.com/u/785815/bastion/index.html
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.
我的测试网站包含多个图像，具有不同的宽度和高度。为了解决这个问题，我必须重新调整它们的大小以使其具有相同的宽度和高度，并且由于宽高比，我还需要将它们居中。
So, I would like to know if:
所以，我想知道是否：
- Is there a way for Flex Slider to do this?
- Is there a way to do it withoutchanging the library's code?
- Flex Slider 有没有办法做到这一点？
- 有没有办法在不更改库代码的情况下做到这一点？
To answers this question, I found the follow articles:
为了回答这个问题，我找到了以下文章：
- 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
- Flexslider 的固定大小- 此解决方案实际上会将所有图像修剪到定义的大小，忽略宽高比。它还需要我更改库本身。
- 让 Flex 适合用户的屏幕.. 无论屏幕尺寸如何 - 我真的不明白这如何适用于 Flex Slider :S
I appreciate any possible help, Pedro.
我感谢任何可能的帮助，佩德罗。
采纳答案by Flame_Phoenix
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:
好吧，我浪费了很多时间，所以我不妨在我自己的问题中尝试一下。我正在用 css3 解决这个问题：
@media only screen and (min-width: 959px) {
.img {
max-width: 50%;
max-height: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
}
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:
在这种情况下，如果用户的物理屏幕宽度 > 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>
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
这会将所有图像的大小（忽略大小差异）调整为原始大小的 50%，并且只会居中然后水平。事实证明，将它们垂直居中，并根据它们的 t 调整它们的大小
回答by Paulius Mar?iukaitis
To solve this problem I'm using CSS - fastest & simplest way I think...
为了解决这个问题，我正在使用 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;}
}
回答by SuN
Alternatively you can crop your images by adding the following properties to existing selectors:
或者，您可以通过将以下属性添加到现有选择器来裁剪图像：
.flexslider .slides > li {
overflow:hidden;
position:relative;
height:400px; /* desired height here */
}
.flexslider .slides img {
height:auto;
}
