Images_image 특수 효과의 적응형 크기 조정에 대한 js 코드

아래 그림과 같습니다.

간단히 살펴보면 text-align:center;를 사용하여 가운데 정렬을 수행할 수 있습니다. 그러나 비례 스케일링은 기본 의 너비 및 높이 속성을 사용하여 해결할 수 없습니다. 사용자 사진이 매우 길거나 매우 넓을 수 있기 때문입니다. 온라인에서 두 사람의 관계를 생각해 보고 조건에 따라 판단했습니다.

코드 복사 코드는 다음과 같습니다.

if(실제 너비> 최대 너비 미리보기) {
확대/축소 너비 = 최대 너비 미리보기
}

if(실제 높이>최대 높이 미리보기) {
확대/축소 높이 = 미리보기 최대 높이
}

그러나 여기에는 문제가 있습니다. 예를 들어 너비와 높이가 모두 조정될 때 크기 조정이 다르면 이미지가 비례적으로 조정되지 않고 매우 추악해진다. 비례적으로 규모를 확장하려면 다양한 판단이 필요합니다. 그러면 이는 우리가 원하는 프로그램을 자동화하는 원칙에 위배됩니다. 다시 생각해 보면 비록 수학을 좋아하지 않지만 수학은 여전히 ​​매우 유용하고 다른 방법도 있어야 합니다. 그리고 비례적으로 크기가 조정되므로 실제 이미지와 미리보기 영역의 너비 사이의 비율을 사용하여 그 관계를 계산하는 것은 어떨까요? 흠... 정말 괜찮아요. 실제로 너비나 높이만 조정하면 됩니다. 비율은 크고 작은 종에만 적용되기 때문입니다. 구체적으로 이를 구현하는 함수를 작성하세요.

코드 복사 코드는 다음과 같습니다.

/ **
* 이미지 적응형 크기 조정
* @param img {Element} 사용자 업로드 이미지
* @param maxWidth {Number} 미리보기 영역의 최대 너비
* @param maxHeight {Number} 미리보기 최대 높이 지역
*/

var resizeImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height; 🎜> // 이미지가 미리보기 영역보다 작으면 변경되지 않습니다.
if(w
// 실제 이미지 비율이 다음보다 큰 경우 미리보기 영역 너비 및 높이 비율
// 이미지 너비 조정 및 그 반대
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight; 🎜>

전체 테스트 코드:

코드 복사

코드는 다음과 같습니다.

이미지 적응형 크기 조정 제목>

.cnt{text-align:center;width:600px;height:350px;margin:0 auto;border:1px solid #ddd;}

> ;

기사로 돌아가기: 비율에 따른 이미지의 적응형 크기 조정 정보»

<script>window.onload = function () { <BR>var img = document.getElementById('img'), <BR>/**<BR>* 이미지 적응형 크기 조정 <BR>* @param img {Element} 사용자 업로드 이미지 <BR>* @param maxWidth {Number} 미리보기 영역의 최대 너비 <BR>* @param maxHeight {Number} 미리보기 최대 높이 지역<BR>*/ <BR>resizeImg = function(img, maxWidth, maxHeight ){ <BR>var w = img .width, <BR>h = img.height; <BR>// 이미지가 미리보기 영역보다 작으면 변경되지 않습니다. <BR>if(w < maxWidth && h < maxHeight) return <BR>// 실제 사진 비율이 미리보기 영역의 너비와 높이 비율보다 큰 경우 <BR>// 이미지 너비를 조정하고, 그렇지 않으면 이미지 너비를 조정합니다<BR>w/ h > maxWidth/maxHeight ? img.width = img.height = maxHeight; <BR>resizeImg(img, 500, 300) <BR></script> >