ビューをスライドレスポンシブにする-インラインスタイルを削除する

ビューのスライドショーから高さと幅のインラインハードコードスタイルを削除するにはどうすればよいですか？ビューのスライドショーをレスポンシブにしようとしています。

私は自分のスライドショーを応答可能にしようとしています（現時点ではflexsliderや他のスライドショーモジュールには興味がありません）。

上記のflexsliderモジュールはモバイルスワイプをサポートしているので素晴らしいようですが、サポートされているのは画像のみで、オーバーレイのサポート付きのビデオスライドショーが必要でした。だから私は私のテーマのCSSファイルに次の行を追加しました、そしてそれはうまくいきました：

.views_slideshow_cycle_main { width: 100%; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .field-content { max-width: 100%; width: 100%; }
.views_slideshow_cycle_main .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0; }

SCSSを使用すると、次のように簡単に記述できます。

.views_slideshow_cycle_main {                                                      
  width: 100%;                                                                     
 .views-slideshow-cycle-main-frame {width: 100% !important; height: auto;}         
 .views-slideshow-cycle-main-frame-row {width: 100% !important; height: auto;}     
 .field-content { max-width: 100%; width: 100%;}                                   
 .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding:0;} 
}   

オーバーレイは、views_slideshow_xtra_overlayによって追加されました。

この議論からの転用

より良いオプションは、ビューのスライドショーモジュール自体の「詳細オプション」を使用することです。

次のことを行う必要があります

1. sites / all / librariesにjson2というディレクトリを作成し、https： //raw.github.com/douglascrockford/JSON-js/master/json2.js をダウンロードして、フォルダーの名前をjson2に変更します。

2. ビューのFORMATスライドショー設定の下で、「jQuery Cycle Custom Options」をスクロールし、詳細オプションセットの下で、

   height: auto
   width: auto
   containerResize: 0
   slideResize: 0
   fit: 1

3. スライドウィンドウの高さを最大のスライドに合わせる：オフのままにします

4. ビューと出来上がりを更新してください！ブラウザウィンドウをドラッグしているときでも、スライドショーは反応します。

参照：こことここ

このスレッドには非常に優れたソリューションがあります：https : //drupal.org/node/1510526

推奨されるcssを使用すると、非常に優れたスライドショーが得られます。JavaScriptを使用すると、少し先に進むことができます。私が抱えている唯一の問題は、ブラウザーを狭めたり広げたりすると、スライドショーの高さが垂直方向のブラウザー周辺で問題を引き起こすことです。メディアクエリのcssファイルごとに異なるmax-height css値を使用して、これを軽減できます。

このサンドボックスプロジェクトには、jcycle2ビューのスライドショープラグインがあります...

https://drupal.org/sandbox/BenYoung/1832338

これは、新しく改善されたjcycle2ライブラリを使用しています-完全に応答します!! http://jquery.malsup.com/cycle2/