컨테이너에 맞게 CSS를 사용하여 이미지 크기 조절

Question

그래서 CSS의 이미지 크기를 컨테이너의 가로 세로 비율을 유지하면서 낮추고 싶습니다. 최소 높이 또는 너비를 지정할 때이 작업을 수행하기는 쉽지만 둘 다 할 수는 없습니다. 어떤 아이디어?

Answer 1

높이가 작은 지 또는 너비가 작은 지 알아보십시오. 어느 차원이 더 작은 지 결정하려면 img의 속성을 설정하고 다른 속성은 설정하지 않습니다. CSS에서 img의 크기를 설정하지 않는다고 가정하면, 이는 컨테이너의 제한 조건 내에서 이미지를 가능한 크게 만드는 동안 종횡비를 유지해야합니다. 이 코드는 컨테이너가 div이라고 가정합니다.

var height = $('#divImg').Height(); 
var width = $('#divImg').Width(); 

if (height > width) 
{ 
    $('#divImg img').Width(width); 
} 
else 
{ 
    $('#divImg img').Height(height); 
} 

편집 :

당신이 jQuery를 사용하지 않는 경우, 당신은 가로 세로 비율을 유지하기 위해 다음과 같은 CSS 트릭을 사용할 수 있습니다. 컨테이너의 크기에 100px 변경 :

#divImg img { 
    height: 100px; 
    width: auto; 
} 
#divImg img { 
    height: auto; 
    width: 100px; 
} 

는 CSS styling image height and width while maintaining aspect ratio에서 차용.