1

ギャラリーの画像を水平（行ごとに1つの画像）または垂直（行ごとに2つの画像）に応じて、行ごとに自動的に合わせることができました。

ここでの問題は、画像をスケーラブルにしたい（ウィンドウのサイズ変更時にサイズを変更する）ことですが、それを実現する方法がわかりません。どうやって作ればいいの？（私は高さを避けるためにjavascript / jqueryソリューションを探しています：自動問題...）

これはウェブです：http：//ldlocal.web44.net/test2/gallery.html

ここからダウンロードできます：http：//ldlocal.web44.net/test2/test.zip

これは私のコードです：

var gallery = new Gallery($('#gallery_images_inner'));

function Gallery(selector){

this.add_module = function(type, image){
    var container = $('<div />' , {
        'class' : 'gallery_container'
    }).append(image);
    if(type == 'horizontal'){
        var h_ar = image.attr('height') / image.attr('width');
        container.css({
            'width' : selector.width(),
            'height' : selector.width()*h_ar
        })
    }
    if(type == 'vertical'){
        container.css({
            'width' : v_width,
            'height' : v_height
        })
    }
    container.appendTo(selector);
    container.children('img').fitToBox();
}
var _this = this;
var gutter = 0;
// start vars for counting on vertical images
var v_counter = 0;
var w_pxls = 0;
var h_pxls = 0;
// iterates through images looking for verticals
selector.children('img').each(function(){
    if($(this).attr('width') < $(this).attr('height')){
        v_counter++;
        h_pxls += $(this).attr('height');
        w_pxls += $(this).attr('width');
    }
})
// calculates average ar for vertical images (anything outside from aspect ratio will be croped)
var h_avrg = Math.floor(h_pxls/v_counter);
var w_avrg = Math.floor(w_pxls/v_counter);
var v_ar = h_avrg/w_avrg;
var v_width = (selector.width())/2;
var v_height = v_width*v_ar;
selector.children('img').each(function(){
    if(parseInt($(this).attr('width')) > parseInt($(this).attr('height'))){
        _this.add_module('horizontal', $(this));
    }else{
        _this.add_module('vertical', $(this));
    }
})
selector.isotope({
    masonry: {
        columnWidth: selector.width() / 2
    }
});

}
4

2 に答える 2

0

すべての新しいコードを更新:

http://jsfiddle.net/vYGGN/

HTML:

<div id="content">
    <img class="fluidimage" src="http://thedoghousediaries.com/comics/uncategorized/2011-04-06-1b32832.png"
    />
</div>

CSS:

        body {
            text-align:center;
        }
        img {
            float: right;
            margin: 0px 10px 10px 10px;
        }
        #content {
            width:70%;
            margin: 0px auto;
            text-align: left;
        }

JS:

        $(document).ready(function () {
            function imageresize() {
                var contentwidth = $('#content').width();
                if ((contentwidth) < '300') {
                    $('.fluidimage').attr('height', '300px');
                } else {
                    $('.fluidimage').attr('height', '600px');
                }
            }

            imageresize(); //Triggers when document first loads      

            $(window).bind("resize", function () { //Adjusts image when browser resized  
                imageresize();
            });

        });

この記事でこれを見つけました：

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

于 2013-02-21T20:27:19.070 に答える
0

画像のサイズを自動的に変更して比例的に縮小したい場合はmax-width、<img>タグに css を設定するだけです。$(window)ドキュメント内の または任意の要素に従って、パーセント値で自動的に縮小できます。$(window)を使用して、ウィンドウのパーセンテージに比例してスケーリングする方法の例を次に示します。

$(document).ready(function() {
    $(window).resize(function() {
        var xWidth = $(window).width();
        $('.[img class]').each(function() {
            $(this).css({maxWidth: xWidth * ([your percentage value of window] / 100)});
        });
    }).trigger('resize');
});

[img class]画像のクラスに変更します。画像の幅をスケーリングするウィンドウ要素の割合に変更[your percentage value of window]します。したがって、90% が必要な場合は、これを 90 に変更します。ユーザーがブラウザー ウィンドウのサイズを変更すると、それに応じて画像のサイズも自動的に変更されます。

于 2013-02-21T20:45:33.320 に答える