Automatically resize image to fit Flex Slider

2019-06-17 03:41发布

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.

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.

So, I would like to know if:

  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:

I appreciate any possible help, Pedro.

3条回答
老娘就宠你
2楼-- · 2019-06-17 04:20

To solve this problem I'm using CSS - fastest & simplest way I think...

@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;}
}
查看更多
Bombasti
3楼-- · 2019-06-17 04:20

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

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>

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

查看更多
我想做一个坏孩纸
4楼-- · 2019-06-17 04:31

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;
}
查看更多
登录 后发表回答