1

私の個人サイトhttp://stevengeorgeharris.comでは、複数のdivを積み重ねた単一ページのデザインを作成しました。divは幅：100％、高さ：100％なので、ブラウザに合わせて拡大縮小します。各div内で、flexsliderを使用してフルスクリーンのスライドショーを作成しています。

私の問題は、ブラウザがフレックススライダーコンテナ内の画像を縮小すると、下に空白が残ることです。

これはフレックススライダー画像のCSSです。

.flexslider .slides img {width: 100%; height:auto; display: block;}

とにかく画像をこのように動作させる方法はありますかhttp://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

4

1 に答える 1

2

このためには、メディアクエリを使用する必要があります。メディアクエリの詳細については、https ：//developer.mozilla.org/en-US/docs/CSS/Media_queriesをご覧ください。

私はあなたがやりたいことをしました。別の写真で、ここで最終結果を見ることができます：http: //jsbin.com/olakit/2

コードは次のとおりです（元の画像は1024 x 683ピクセルです）。

img {
  width: 100%;
  height : 100%;
}

@media (min-width: 2000px) {
  img{
    height: auto;
  }
}

「最小幅」は画像の幅よりも大きくする必要があることに注意してください。

于 2013-02-19T00:45:00.863 に答える