0

私はcssを使用して6つの画像を並べて配置しようとしていますが、ほとんどのディスプレイ（現時点ではモバイルを除く）ですべてがかなりうまくスケーリングできるはずなので、これを作成しました： http://pelloponisos.telesto .gr / galleryTest / test / gallery.php＃ （どうやら私はさらに別のカルーセルを作ろうとしています）

ほとんどの画像の幅は高さよりも大きいので、拡大縮小するときは、幅：x％をliコンテナーに入れ、画像の幅を100％にします。

しかし、6番目の画像は異なり、かなりの問題が発生します。高さも設定してみましたが、2つのうちの1つに基づいて画像を拡大縮小することしかできません。

これまでに機能したのは、ulに静的な高さを設定し、幅と高さの両方でスケーリングすることだけでしたが、それは流動的なグリッドではありません。

すべてのli要素に流動的な高さを持たせ、それに基づいてすべての画像を拡大縮小する方法はありますか？または、そうでない場合は、cssで指定したものとは異なる比率スケールの画像を作成する方法はありますか？

4

1 に答える 1

1

私はあなたのコードを少し削除しましたが、これはアイデアに近づいているようです. コツは、コンテナー (.upper ul li) の幅を設定してから、画像に次を使用することです。 max-width:100%; 高さ: 自動。また、パディングは % になりました。

            #carousel{
            position:relative;
            }
            #wrapper{
            margin:0 auto;
            }

            #slides{
            width: 100%;
            }
            .upper ul li{
            width: 200px;
            max-width: 100%;
            list-style:none outside none;
            float:left;
            padding-bottom:5px;
            padding:2%; 
            }
            img.galleryThumbnail{
            max-width:100%;
            height:auto;
            }
            .info{
            display:none;
            }

            #buttons img{
            position:absolute;
            top:90px;
            }
            #buttons #prev img{
            position:absolute;
            left:29px;}
            #buttons #next img{
            position:absolute;
            right:21px;
            }
于 2012-11-07T19:55:33.100 に答える