Geek Answers Handbook

Resize image using jquery

I have an image under div id myimage. Now I want to change it using the changes. I want in the selection box if 700X7000 is selected, then the image size will be 700 pixels high and 700 pixels wide. Due to page reload. Can someone help me how can I do this?

+5
source share
4 answers

Well, to change it, you can just set the image width()and height():

$('#myimage').width(700); // Units are assumed to be pixels
$('#myimage').height(700);

, , , - 100x100, 200x200 .. split :

var parts = '100x100'.split('x');
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10
var height = parseInt(parts[1], 10);
+24

- , .

if( condition ) {
   $('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
   $('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};

, :

// First way 
$('#checkBox').attr('checked'); 

// Second way 
$('#checkBox').is(':checked');

:

if( $('#checkBox').attr('checked') ) {
   $('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
   $('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
+5
<!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/

+1
source

or

Object Submission Function

<img onLoad="ozhpixel(this)"

function ozhpixel(imaj){
$(imaj).width(100); // Units are assumed to be pixels
$(imaj).height(50);}
0
source

More articles:


All Articles