自動調整圖像大小以適合Flex Slider

Question

我正在學習如何使用Flex Slider制作圖像滑塊和旋轉木馬。 然而，當所有圖像具有完全相同的寬度和高度時，Flex似乎只是好的。

問題可以在以下網站看到：

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

圖像非常大，所以請在裝載時保持耐心。

我的測試網站包括幾個不同寬度和高度的圖像。 為了解決這個問題，我必須將它們重新調整為相同的寬度和高度，並且由於寬高比的原因，我還需要將它們居中。

所以，我想知道是否：

1. Flex Slider有沒有辦法做到這一點？
2. 有沒有辦法在不更改庫代碼的情況下執行此操作？

為了回答這個問題，我找到了以下文章：

• Flexslider的固定大小 - 此解決方案實際上將所有圖像修剪為定義的大小，忽略寬度 - 高度比率。 它還要求我改變庫本身。
• 使Flex適合用戶的屏幕..無論屏幕尺寸如何 - 我真的不明白這個適用於Flex Slider：S

我很感激任何可能的幫助，佩德羅。

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

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％，並且僅在HORIZONTALLY中心。 結果是將它們垂直居中，並根據它們的t來調整它們的大小

Answer 3

或者，您可以通過向現有選擇器添加以下屬性來裁剪圖像：

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