web-dev-qa-db-ja.com

FlexSliderに合わせて画像のサイズを自動的に変更

Flex Slider を使用して画像スライダーとカルーセルを作成する方法を学んでいます。ただし、Flexは、すべての画像の幅と高さがまったく同じである場合にのみ適切であるように見えます。

この問題は、次のWebサイトで確認できます。

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

画像はかなり大きいので、読み込み中はしばらくお待ちください。

私のテストWebサイトには、幅と高さが異なる複数の画像が含まれています。これを修正するには、幅と高さが同じになるようにサイズを変更する必要があります。また、幅と高さの比率のために、中央に配置する必要があります。

だから、私は知りたいのです：

  1. Flex Sliderでこれを行う方法はありますか？
  2. ライブラリのコードを変更せずにそれを行う方法はありますか？

この質問に答えるために、私は次の記事を見つけました：

ペドロ、助けてくれてありがとう。

javascriptflexslider
7
Flame_Phoenix

さて、これで多くの時間を無駄にしたので、私自身の質問で試してみるのもよいでしょう。私は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
Flame_Phoenix

この問題を解決するために、私は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
Paulius Marčiukaitis

または、次のプロパティを追加して画像をトリミングすることもできます既存のセレクターに：

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