사용자는 사진을 업로드하고 사진의 크기는 알려져 있지 않습니다 비율로 확대해야합니다. 아래와 같이.
살펴보면 텍스트-정렬 : 센터를 사용할 수 있습니다. 비례하여, 사전 설정 <img />를 사용하는 너비 및 높이 속성은 해결할 수 없습니다. 사용자 사진은 매우 길거나 매우 넓을 수 있기 때문입니다. 나는 온라인에서 그들의 관계에 대해 생각했고 이것이 다음과 같다고 판단했다.
if (실제 너비> 최대 너비 미리보기) {
스케일링 너비 = 미리보기 최대 너비
}
if (실제 높이> 미리보기 최대 높이) {
스케일링 높이 = 미리보기 최대 높이
}
그러나 예를 들어, 폭과 높이가 스케일링이 비교적 다르면 비례 적으로 스케일링되지 않으면 문제가 발생합니다. 비례 적으로 확장되도록하기 위해서는 다양한 판단이 필요합니다. 그런 다음 자동화에 대한 우리의 희망의 원칙을 위반합니다. 수학을 좋아하지 않지만 수학은 여전히 매우 유용하지만 다른 방법이 있어야합니다. 비례로 확장되므로 실제 이미지와 미리보기 영역 너비의 비율을 사용하여 관계를 계산하지 않겠습니까? 흠 ... 정말 괜찮아. 실제로, 우리는 너비 나 높이를 확대하면됩니다. 비율은 크고 작기 때문입니다. 구체적으로,이를 구현하는 기능을 작성하십시오.
다음과 같이 코드 코드를 복사하십시오.
/**
* 사진은 적응 형 비율로 확대됩니다
* @param img {element} 그림이 사용자가 업로드했습니다
* @param maxwidth {number} 미리보기 영역의 최대 너비
* @param maxheight {number} 미리보기 영역의 최대 높이
*/
var resizeimg = function (img, maxwidth, maxheight) {
var w = img.width,
h = img.head;
// 사진이 미리보기 영역 시간보다 변경되지 않는 경우
if (w <maxwidth && h <maxheight) 반환;
// 실제 사진 비율이 미리보기 영역의 너비 및 높이보다 큰 경우
// 사진 너비를 스케일링합니다. 그렇지 않으면 사진 너비를 스케일링합니다
w/h> maxWidth/maxHeight?