상위 요소 내 요소 맞추기

Question

다음을 만들려고합니다.

종횡비를 유지하는 작은 div 요소 내에 거대한 이미지를 맞추십시오.
CSS 트릭을 사용하지 않고 max-width와 같이 사용합니다. 수동으로 너비/높이를 올바른 값으로 설정하십시오.

내가하는 일을 설명하는 가장 쉬운 방법입니다.
다음 값을 받았습니다.

원본 이미지의 너비/높이.
대상 div의 너비/높이.

다음 예제를 사용하여 부모 요소 내에 맞춰 보았습니다.

if(ratio < 1) { 
    setWidth = Math.round((targetH * ratio)); 
} else { 
    setHeight = Math.round((targetW/ratio)); 
} 

이는 종횡비를보고 크기를 조정합니다.
종횡비가 1 미만인 경우 제대로 작동합니다. 높이가 올라가면 높이가 엉망이되기 시작합니다. 또한 상당한 높이의 상당한 양의 0.99에서 1로 올랐을 때 도약하는 것처럼 보입니다.

Answer 1

조 (Joe)는 다른 stackoverflow 질문에 보낸 링크와 함께 오른쪽 흔적을 남겨 둡니다. 다음 코드는 내가 결국 사용하는 코드입니다.

"폭"은 스케일 할 요소의 현재 너비입니다.
"높이"은 축척 할 요소의 현재 높이입니다.
"targetW"은 눈금의 최대 너비입니다.
"targetH"은 눈금의 최대 높이입니다.

요소를 부모 요소 내에 완벽하게 맞 춥니 다. 상관없이 어떤 종횡비.

if(width > targetW){ 
    ratio = targetW/width; 
    height = height * ratio; 
    width = width * ratio; 
} 

if(height > targetH){ 
    ratio = targetH/height; 
    width = width * ratio; 
    height = height * ratio; 
} 

덕분에이 질문에 당신을 도울 수