이미지의 높이 또는 너비가 가장 큰 것을 기반으로 고정 된 크기

Question

이미지가 포함될 "photoFrame"이라는 div가 있습니다. photoFrame의 너비는 450px이고 높이는 350px입니다.

크기가 다른 이미지가 있습니다.

내가하고 싶은 일은 특정 이미지가 1) 넓이보다 큰 것보다 크거나 2) 너비가 넓은 것인가를 결정하는 것입니다. 이 기능을 사용하면 이미지 크기를 너비 : 450px, 높이 : 자동; 또는 너비 : 자동, 높이 350px;

나는 자바 스크립트로 이것을하고 있는데, 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 : 그냥 참조를 위해, 여기에 최종 수정입니다

이미지의 크기를 조정하고 포토 프레임 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 이미지가 포토 프레임 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)); 
     } 
    } 
    ... 
});