1

コンテナー内の画像の動的スケーリングについて質問がありますdiv。幅はすべてスケーラブルですが、高さは静的なプロジェクト画像の 3 つの列を持つポートフォリオ Web サイトを構築しています (例:divコンテナー => 幅 33.33334% : 高さ 250px)。

私はさまざまな CSS のアイデアに戸惑いましたが、イメージとコンテナの寸法が異なるため、常にレイアウトが崩れます。私は CSS や JS にそれほど熟練していないので、最初に解決策を探す場所、おそらくいくつかのコードのアイデア/スニペット、さらにはより良い例/API などのアドバイスを探して行き詰まっています.

画像の 1 つが寸法のために小さく、レイアウトが壊れていることがわかるので、現在の場所の小さな例を作成しました。

jsfiddle の例: jsFiddle の例

正直なところわからないので、この画像スケーリング技術が何と呼ばれているかについて、これ以上正確に言うことはできません。

よろしくマッツ

4

4 に答える 4

0

この問題に対する jQuery ソリューションを見つけた可能性があります。 この jsFiddel を確認してください。

または、ここでオンラインの例を確認してください

ここで私がしていることは、ページの読み込みが完了したら、.box コンテナーに対してすべての画像をチェックして、必要な CSS スタイルを判断することです。できあがり、画像はコンテナに合わせて流動的にスケーリングされます。次のステップは、画像を div コンテナ内の中央に配置することです。

コードがクロスブラウザ用に適切に記述されているかどうかを確認する機会があれば、それは本当に素晴らしいことであり、他の人もそれを使用する可能性があります:)。ご協力ありがとうございます。

ハッピー:D マッツ

jQuery コード:

$(window).load(function() {
            plottingData();
            resizeImage();
        });

        $(window).resize(function() {
            plottingData();
            resizeImage();
        });

        function plottingData(){
            var image = $('.box img');
            var divW = $(".box").width();
            var divH = $(".box").height();
            var imgW = image.width();
            var imgH = image.height();
            $('.outputText').html('DIV CONTAINER W: '+divW+ ' H: ' +divH +'  ::  imgW: '+imgW +' : imgH: ' +imgH) ;
        }


        function resizeImage(){
            $("img").each(function(){
            var maxWidth = $(".box").width();; // Max width for the image
            var maxHeight = $(".box").height();;    // Max height for the image
            var maxratio=maxHeight/maxWidth;
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height
            var curentratio=height/width;
            // Check if the current width is larger than the max

            if(curentratio>maxratio)
            {
                ratio = maxWidth / width;   // get ratio for scaling image
                /*
                $(this).css("width", maxWidth); // Set new width
                $(this).css("height", height *ratio); // Scale height based on ratio
                */
                $(this).css("width", "100%");
                $(this).css("height", "auto");
            }
            else
            { 
                /*
                ratio = maxHeight / height; // get ratio for scaling image
                $(this).css("height", maxHeight);   // Set new height
                $(this).css("width", width * ratio);    // Scale width based on ratio
                */
                $(this).css("width", "auto");
                $(this).css("height", "100%");
            }

        });
        }
于 2013-04-02T21:25:06.113 に答える