이미지로드시 크기 조정

이미지가 포함 된 div 목록이 있는데 적절한 크기인지 확인하고 싶습니다. 부모의 100 %보다 작은 경우가 아니면 보통 100 % 너비입니다.이 경우 부모의 원래 크기 여야합니다.이미지로드시 크기 조정

되는 HTML에 관해서는

$('.sa-img').each(function() { 
    img = new Image(); 
    var obj = $(this); 
    img.onload = function() { 
     //console.log(this.width + ' <= ' + obj.outerWidth()); 
     if (this.width <= obj.outerWidth()) 
      obj.css({'width':this.width +'px'}); 
     } 
     img.src = $(this).attr('src'); 
    } 
});

, 그것은이 약으로 간단합니다 : 첫 번째 이미지 제외하고 지금이 벌금과 멋쟁이 작동

<div class="sa-img-container"> 
    <img class="sa-img" src="<?=$img_url?>" /> 
</div>

, 여기 내 코드입니다. 그것에 대해 무엇을해야합니까? 마치 적재물이나 뭔가를 기다리지 않는 것입니다. 이미지를 재정렬해도 상관 없습니다. 항상 고통 스러울 첫 번째 이미지입니다. 원본 크기의 출력은 항상 100이며, 100 %보다 큰 사실에 관계없이 이미지의 원래 크기로 크기가 조정됩니다 (예 : 220px의 이미지는 100 % 대신 220px로, 204px의 내부에서는 DIV -... 예상대로 레이아웃이 작동하지 원인이 위의 설명에서와 같이

출처

2013-05-12 casraf

CSS 'max-width : 100 %'의 문제점은 무엇입니까? – ahren

크기가 작지 않은 한 100 % 이미지가 필요합니다.이 경우 이미지는 100 %가 아닌 원래 크기로 유지되어야합니다. – casraf

아니요, 관련성이 없습니다. 다음은 그 예입니다. http://jsfiddle.net/efbVZ/ – ahren

, 이것은 당신은, 이미지의 폭을 가정

max-width 특성, 특히 아주 쉽게 CSS를 사용하여 달성 600 픽셀입니다 가질 수 있습니다 :

.resize-to-100{ 
    width: 500px; 
    background: red; 
} 
.dont-resize{ 
    width: 750px; 
    background: yellow; 
} 
img{ 
    max-width: 100%; 
}

예 : http://jsfiddle.net/efbVZ/

출처

2013-05-12 11:59:36 ahren

이미지로드시 크기 조정

답변

관련 문제