Sat Jan 05, 2013 11:13 pm
<html>
<head>
<title>Resize Image under JQuery</title>
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// IMAGE RESIZE
$('img#resize').each(function() {
var widthLimit = 20;
var maxHeight = 20;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > widthLimit){
ratio = widthLimit / width;
$(this).css("width", widthLimit);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > heightLimit){
ratio = heightLimit / height;
$(this).css("height", heightLimit);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
});
});
</script>
</head>
<body>
<p> Press the button to resize the image </p>
<img id="resize" src="site_logo.gif" />
<button>Resize Image</button>
</body>
</html>
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.