基於寬度或高度最高的縮放圖像固定量

我有一個名爲「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

基於寬度或高度最高的縮放圖像固定量

回答

相關問題