Автоматическое изменение размера изображения в соответствии с Flex Slider

Я учусь, как использовать Flex Slider сделать слайдеры и карусели изображения. Однако Flex только кажется хорошим, когда все изображения имеют одинаковую ширину и высоту.

проблему можно увидеть на следующем веб-сайте:

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

картинки довольно большие, поэтому, пожалуйста, будьте терпеливы во время загрузки.

мой тестовый сайт включает в себя несколько изображений, с различной шириной и высотой. Чтобы исправить это, я должен изменить их размер, чтобы иметь одинаковую ширину и высоту, а также центрировать их из-за соотношения ширины и высоты.

Итак, я хотел бы знать, если:

  1. есть ли способ для Flex Slider сделать это?
  2. есть ли способ сделать это без изменение кода библиотеки?

чтобы ответить на этот вопрос, я нашел следующее статьи:

Я ценю любую помощь, Педро.

6
flexslider javascript

3 ответов

чтобы решить эту проблему, я использую 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;}
}
3

Ну, я потратил много времени на это, поэтому я мог бы попробовать в своем собственном вопросе. Я решаю эту проблему с 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% от их исходного размера и будет центрироваться только по горизонтали. Оказывается, что центрировать их по вертикали и изменять их размер в зависимости от их t

3

в качестве альтернативы вы можете обрезать изображения, добавив следующие свойства существующие селекторы:

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