Menu
I have a image under div id myimage. Now I want to resize it by using change. I want from select box if selected 700X7000 then image's size will be height 700px and width 700px. With out reloading the page. Can anyone help me how can I do this?
802
Answer: Use the JavaScript width and height property You can use either width or height JavaScript property to proportionally increase and decrease the dimension of an image like zoom-in and zoom-out feature.
var imageWidth = $(Imgsize). width(); alert(imageWidth); var imageHeight = Imgsize.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Well, to change it, you can just set the image's width() and height():
$('#myimage').width(700); // Units are assumed to be pixels
$('#myimage').height(700);
So for you to do the drop down box, you can just set the values to be something like 100x100, 200x200, etc. and split the selected value to extract the dimensions:
var parts = '100x100'.split('x');
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10
var height = parseInt(parts[1], 10);
The condition is where you can say item selected.
if( condition ) {
$('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
$('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
Below are ways to check to see if the box is selected:
// First way
$('#checkBox').attr('checked');
// Second way
$('#checkBox').is(':checked');
Example working:
if( $('#checkBox').attr('checked') ) {
$('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
$('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#photograph").click(function () {
$("img").animate({
height: '+=5px',
width: '+=5px'
});
});
});
}
</script>
</head>
<body>
<div>
<img src="photo/grass.jpg" id="photograph" style="width:304px;height:228px;"/>
</div>
</body>
</html>
Fiddle : https://jsfiddle.net/cmxevnp0/3/
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
