클릭시 화면 비율 유지/감소 이미지

Question

이미지를 확대 (확대)하고 축소 (축소)하고 가로 세로 비율을 유지할 수 있기를 원합니다.

간단한 예제를 만들었지 만 종횡비를 유지하는 방법을 모르겠습니다.

줄이면 최소 크기를 설정할 수 있습니까?

감사

HTML

<div id="image-container"> 
    <img src="Image.jpg" alt=""/> 
</div> 
<div id="image-controls"> 
    <input id="zoom-in" value="+" type="submit" /> 
    <input id="zoom-out" value="-" type="submit" /> 
</div> 

JQuery와는

$(document).ready(function() { 

var img = $('#image-container img'); 
var zoomWidthIncrement = img.width() * 1/3; 
var zoomHeightIncrement = img.height() * 1/3; 

$("#zoom-in").click(function (e){ 
    img.css({width: img.width() + zoomWidthIncrement, height: img.height() + zoomHeightIncrement}); 
e.preventDefault(); 
}); 

$("#zoom-out").click(function (e){ 
    img.css({width: img.width(function(i, w) { return w - zoomWidthIncrement; }), height: img.height(function(i, w) { return w - zoomWidthIncrement; }) 
}); 
e.preventDefault(); 
}); 
}); 

Answer 1

그냥 너비 또는 높이, 둘을 변경합니다. 브라우저는 이미지를 자동으로 비율에 맞게 조정합니다.

jsFiddle example.