基于宽度或高度最高的缩放图像固定量

我有一个名为“photoFrame”的div将包含图像。相框的宽度为450px，高度为350px;基于宽度或高度最高的缩放图像固定量

我有不同大小的图像。

我想要做的是确定一个特定的图像是1）比它高还是2）比它宽。一旦我有了这个，我想调整图像的宽度：450px; height：auto;或宽度：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)); 
     } 
    } 
    ... 
});

来源

2012-03-21 nclayton

很高兴见到你有一些作品。如果你已经找到解决自己问题的方法，你可以（也应该！）将它作为答案添加，而不是将其编辑到问题中。请参阅：http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/ – 2012-03-21 20:32:31

修改了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)); 
     } 
    } 
    ... 
});

来源

2012-03-22 13:59:16 nclayton

基于宽度或高度最高的缩放图像固定量

回答

相关问题