0

高さが幅に比例する全幅スライドショーを作成するにはどうすればよいですか?

したがって、比率を維持したまま全幅の画像を作成する CSS があります。

#featured-slideshow {
    width: 100%;
}
#featured-slideshow .slideshow {
    width: 100%;
}
#featured-slideshow .slideshow img {
    width: 100% !important;
    min-height: 300px;
    min-width: 892px;
}

そして、マークアップは次のとおりです。

<div id="featured-slideshow">
    <div class="slideshow">
        <img src="images/slideshow/image-1.jpg" />
        <img src="images/slideshow/image-2.jpg" />
        <img src="images/slideshow/image-3.jpg" />
    </div>
</div>

私が抱えている問題は、jquery サイクルなどの jquery プラグインをこれに適用するとすぐに、ウィンドウのスケーリングを開始すると幅と高さを調整できないことです。

どんな助けでも大歓迎です-私は他のスライドショープラグインまたはソリューションを使用することにオープンです.

どうもありがとう

4

2 に答える 2

2

ほとんどの jquery スライドショーは、さまざまなサイズの画面用にさまざまなスタイルシートを参照するための media 属性と互換性があるはずです。

<link rel="stylesheet" media="screen and (min-width: 1431px) and (max-width: 1799px)" href="css/stylefifteen.css">

したがって、13、15、21、および 27 サイズの画面に対して異なるサイズのスライドショーを設定し、各スタイルシートで、スライドショー フレームと img クラスがそれに応じてサイズ変更されることを確認します。

デモはここで見ることができます (動作していない Web サイト - この例のみを参照) - 画面をさまざまなサイズにドラッグすると、スライドショーはそれに応じて 13 インチから 27 インチの画面にうまくサイズ変更されます。

スライドショーのスケーリングの例

私はこれが、スーパーサイズのように再スケーリングする「オンザフライ」ソリューションを取得しようとするよりもはるかに優れていることを発見しました（ただし、スーパーサイズは背景画像には最適です）

于 2012-05-09T23:57:54.577 に答える
0

おそらく、jquery-supersizedは、あなたがやろうとしていることにより適しています。

于 2011-03-22T10:18:53.007 に答える