jQuery를 사용하여 이미지 크기를 비례적으로 조정하는 방법은 무엇입니까?

jQuery로 이미지 비율 유지

이미지의 크기를 비례적으로 조정하는 것은 시각적 무결성을 유지하는 데 중요합니다. jQuery는 이미지의 가로세로 비율을 유지하면서 크기를 조정할 수 있는 간단한 솔루션을 제공합니다.

비례 치수를 계산하는 방법

다음 함수는 크기가 조정된 이미지의 적절한 너비와 높이를 결정합니다. :

<code class="js">function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }</code>

이 함수는 원본 이미지 크기(srcWidth, srcHeight)와 사용 가능한 최대 너비 및 높이(maxWidth, maxHeight)를 매개 변수로 받아들입니다. 종횡비를 유지하기 위해 원본 크기와 최대 크기 사이의 최소 비율을 계산합니다. 그런 다음 원래 값에 이 비율을 곱하여 새 너비와 높이가 결정됩니다.

jQuery로 논리 적용

새 치수를 계산한 후에는 다음을 수행할 수 있습니다. jQuery를 사용하여 이미지 크기 조정:

<code class="js">var newDimensions = calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight);

$("img").width(newDimensions.width);
$("img").height(newDimensions.height);</code>

이 코드는 선택한 이미지 요소의 너비 및 높이 속성을 계산된 값으로 동적으로 설정합니다.

위 내용은 jQuery를 사용하여 이미지 크기를 비례적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!