Question

我有一个名为＆＃34; photoFrame＆＃34;这将包含图像。 photoFrame的宽度为450像素，高度为350像素;

我的图片大小不一。

我想要做的是确定特定图像是否比宽度高1或高2宽。一旦我有这个，我想将图像调整为宽度：450px;高度：自动;或宽度：auto; height350px;

我现在正在使用javascript进行此操作，但是想知道是否有更好的方法通过css或jquery执行此操作？

修改

我正在使用jquery.cycle.lite插件替换旧代码。

我已将此添加到$ .fn.cycle函数中（虽然我不愿意）：

$slides.each(function(){
    var $el = $(this);
    if($el.width() > $el.height()){ $el.css('width',450); } // Custom coding here
    else{ $el.css('height',350); }
    ...
});

编辑2：

仅供参考，这是最后的修改。它会调整图像的大小，并在photoFrame div中水平或垂直居中。

$slides.each(function(){
    var $el = $(this);
    if($el.width() > $el.height()){  // Custom coding here
        $el.css('width',450); 
        if($el.height() != 350){ // Account for height equal to photoFrame height
            $el.css('top','50%');
            $el.css('margin-top',-($el.height() / 2));
        }
    }else{ 
        $el.css('height',350); 
        if($el.width != 450){ // Account for width equal to photoFrame width
            $el.css('left','50%');
            $el.css('margin-left',-($el.width() / 2));
        }
    }
    ...
});

Answer 1

修改了jquery.cycle.lite.js，以便调整它循环的图像大小以适合photoFrame div的尺寸。

<强> $。fn.cycle

$slides.each(function(){ 
    var $el = $(this); 
    if($el.width() > $el.height()){  // Custom coding here 
        $el.css('width',450);  
        if($el.height() != 350){ // Account for height equal to photoFrame height 
            $el.css('top','50%'); 
            $el.css('margin-top',-($el.height() / 2)); 
        } 
    }else{  
        $el.css('height',350);  
        if($el.width != 450){ // Account for width equal to photoFrame width 
            $el.css('left','50%'); 
            $el.css('margin-left',-($el.width() / 2)); 
        } 
    } 
    ... 
});

根据宽度或高度的最高值缩放图像固定量

1 个答案: