0

私のスライドショーは、さまざまな画面サイズに調整することになると完全に失敗するという事実を除いて、すべての面で正しく機能しています。

大画面では正常に機能しますが、他の画面では適応せず、水平スクローラーが追加されます。

幅を100％追加しましたが、これを行う正しい方法は、すべてを動的に調整するjavascriptコードを使用することです。問題は、これを行った経験がなく、どこから始めればよいかわからないことです。ちなみに私のページにはjQueryがロードされています。

スライドショーのサンプル構造は次のとおりです。

<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>

'.featured-image img'を動的にターゲットにし、それに幅と高さを追加するjQueryスクリプトがこれを行う方法であると思います。それよりも優れた方法や、より単純なスクリプトはありますか？どんな助けでも大歓迎です。

4

1 に答える 1

1 
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);

動的に調整する必要がある場合は、サイズ変更イベントをキャプチャする必要があります。

$(window).resize(function() {
  var screenWidth = $(document).width();
  $('.featured-image img').width(screenWidth);
});
于 2012-10-29T15:34:09.347 に答える