제한 구역 안에 오버플로 이미지를 센터링하는 방법

Question

크기가 다른 이미지의 페이드 슬라이드 쇼가 포함 된 240x240 픽셀 div이 있습니다. 각 이미지의 너비에 비례하여 자동으로 너비가 height: 240px으로 설정되었습니다. 일부 이미지의 너비가 (비례하여) 넓어서 div을 사용하여 div을 사용합니다.이 이미지는 오버플로 240px div의 이미지를 제외하면 잘 작동합니다. 오버플로하는 div 내부의 이미지를 센터링하는 방법은 무엇입니까? 나는이 (jQuery를) 시도했지만 내가 알아낼 수 없습니다 확실 해요 어떤 이유로 작동하지 않습니다 이미지가 폭의 div을 확장하는 경우

가

if($("div img").width() > 240) { 
    $(this).css("margin-left", rv); 
    var rv = -1 * ($(this).width()/4) + "px"; 
} 

논리가 존재, 다음으로 이동 왼쪽은 rv px, rv 인 이미지의 너비의 1/4입니다 (1/2는 이미지를 왼쪽에서 절반으로 잘라 내기 때문에 1/2의 1/2이 효과적으로 중심에 배치됩니까?). 내 첫 번째 추측은 내가 전혀 모르는 사이에 내가 시도하고있는 것처럼 $(this)을 참조 할 수 없다.

개별 인라인 CSS 스타일을 추가 할 수는 있지만 지저분하고 평범한 것 같습니다. 차라리 이미지의 중심을 자동으로 계산하여 그에 따라 움직일 수있는 스크립트를 갖고 싶습니다. 어떤 아이디어?

Answer 1

나는이 같은 것을 권 해드립니다 :

div.center-img { background:url('/path/img.jpg') center center no-repeat; } 

을하지만 귀하의 질문에이 같은 뭔가 대답 할 것이다 :

$('div img').each(function() { 
    if(this.width > 240) 
     $(this).css("margin-left", ((this.width - 240)/-2) + "px"); 
}); 

Answer 2

당신은 CSS를 사용할 수있는 경우 :

LIVE DEMO

.imgHolder{ 
    border:1px solid #000; 
    width:240px; 
    height:240px; 
    line-height:240px; /* same as element height */ 
    font-size:0;  /* to perfectly vertical align middle the image */ 
    text-align:center; /* to horizontally align middle the image */ 
} 
.imgHolder > img{ 
    max-width:100%; 
    max-height:100%; 
    vertical-align:middle; 
} 

Answer 3

이미지 반복 처리 그들은, 이미지의 폭과 부모 요소의 폭을 얻을 폭을 비교하고, 경우에로드 한 경우 이미지가 부모보다 더 넓 으면 차이의 절반을 가져 와서 왼쪽 여백에서 이미지를 뺍니다. 그러면 이미지가 수평으로 가운데에 배치됩니다.

$("div.centered img").each(function(_,el) { 
    var img = new Image(), 
     parent = $(el).parent(); 

    img.onload = function() { 
     var ma = this.width - $(parent).width(); 
     if (ma > 0) { 
      $(el).css('margin-left', ((ma/2) * -1)); 
     } 
    } 
    img.src = this.src; 
    if (img.complete) img.onload(); 
}); 

FIDDLE