는 어떻게 다음

Question

이 좋아, 여기에 거래의 그 바르를 사용하여 이미지의 H & W를 찾아 바르로 변환 할 여기에 그들이 제공하는 무엇, 나는 사용자가 크기와 화면 비율을 다른 이미지를 업로드해야합니다, 그래서 :하지만 특정 문제가 해결되지 않는 scaleX가 및 scaleY 후 번호는 실제 픽셀입니다

function preview(img, selection) { 
var scaleX = 160/selection.width; 
var scaleY = 160/selection.height; 
$('#thumbnail + div > img').css({ 
    width: Math.round(scaleX * 500) + 'px', 
    height: Math.round(scaleY * 375) + 'px', 
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 

데모에서 사용하는 이미지의 크기.

width: Math.round(scaleX * width) + 'px', 
height: Math.round(scaleY * height) + 'px', 

내가 사이트에이 일찍 발견 :

그때의 .js 그 값이 scaleX가 및 scaleY 곱셈기 등이 될 가지고 바르를 생성 한 그림을 업로드 사용자가 할 수 있도록하려면

var image=document.getElementById("imageID"); 
var width=image.offsetWidth; 
var height=image.offsetHeight; 

그렇다면 나 같은 상대적인 초보자가이 모든 작업을 함께 할 수 있을까요?

Answer 1

$(document).ready(function() { 
$('.story-small img').each(function() { 
    var maxWidth = 100; // Max width for the image 
    var maxHeight = 100; // Max height for the image 
    var ratio = 0; // Used for aspect ratio 
    var width = $(this).width(); // Current image width 
    var height = $(this).height(); // Current image height 

    // Check if the current width is larger than the max 
    if(width > maxWidth){ 
     ratio = maxWidth/width; // get ratio for scaling image 
     $(this).css("width", maxWidth); // Set new width 
     $(this).css("height", height * ratio); // Scale height based on ratio 
     height = height * ratio; // Reset height to match scaled image 
     width = width * ratio; // Reset width to match scaled image 
    } 

    // Check if current height is larger than max 
    if(height > maxHeight){ 
     ratio = maxHeight/height; // get ratio for scaling image 
     $(this).css("height", maxHeight); // Set new height 
     $(this).css("width", width * ratio); // Scale width based on ratio 
     width = width * ratio; // Reset width to match scaled image 
    } 
}); 

});