応答全幅cssSlider - ブレークポイント

Question

までの高さを保つ私はwww.cssslider.comでcssSliderのライセンスを購入したいのですが、私はそれが最初に動作するように取得する必要があります。

私は応答フル幅スライダーをしたいです。ブラウザウィンドウの幅が減少するにつれ、私が最初にそのままのスライダーの高さを維持したい（スライダーの画像の辺のみがカットされます）。 （ブラウザウィンドウが自分のサイト上のコンテンツラッパーの幅と同じ幅を持っている場合）、特定のブレークポイントの後、唯一の私は垂直方向にも同様に小さくなるために、スライダをしたいです。このようにして、スライダは小さなデバイスでは馬鹿げて薄くなることはありません。私は自分自身をよく説明することを願っています

は、私が1120×500の幅と透明.GIFを使用して、バックグラウンドとして使用される単一イメージで自分のサイト上でこれを行うために管理： https://www.easterisland.travel/

私は、彼らがこれを持っているので、それは、cssSliderで可能であることを知っています最初のページのトップのスライダ（http://cssslider.com/）には機能がありますが、これをcssSlider実行可能プログラムで選択するオプションはありません。

任意の手がかり？ありがとうございました！

Answer 1

を、私はこれが正しいコードであることが判明：

@media only screen and (max-width: 1500px) { 
    .csslider1, 
    .csslider1 > ul { 
     height: auto; 
    } 
} 

私はcssSliderプログラムが自動的に生成することが判明私が正しい設定で探していた行動。あなたがする必要があるのは、 "全幅"がチェックされた状態で、イメージ幅として必要なブレークポイントを置くことだけです。

Answer 2

は、小さな画面の場合、それらは、メディアクエリー内部autoに容器の高さを設定します。そして、画面幅に基づいて異なる画像を表示するように見えます。だから、レスポンシブなイメージのように見えます。

応答イメージはあなたがIE、サーバー構成を気にするかどうかに応じて、複雑な、そしてあなたは、PHPやJavaScript、などなどを知っているかどうかをここにいくつかの情報ですすることができます。https://css-tricks.com/which-responsive-images-solution-should-you-use/

代替ソリューション：あなたは、新しいCSS3を使用することができますvwとvhの単位。
VWとVHは、ビューポートの割合です。これに対するブラウザのサポートは、css3スライダのサポートとほぼ同じですので、大丈夫です！

は、このような何かそのメディアクエリーを交換してみてください：最後に

@media only screen and (max-width: 800px) { 
    .csslider1, .csslider1 > ul { 
     height: 75vh; max-height:450px; 
    } 
}