change image dimensions with jquery

T

5

9

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?

Teak answered 1/7, 2011 at 16:50 Comment(2)

Someone might want to audit me on this - but couldn't you create a div for the img, and set the img max-width to 100% and resize the div accordingly? – Otey 1/7, 2011 at 17:11

@melee: I think you can do that for the image directly. – Steenbok 2/7, 2011 at 17:46

S

31

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);

Steenbok answered 1/7, 2011 at 16:54 Comment(0)

D

6

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'});
};

Drinkable answered 1/7, 2011 at 17:8 Comment(0)

S

1

<!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/

Scherzando answered 4/9, 2015 at 8:56 Comment(1)

Explain your answer either by words or a fiddle. Make it more human. – Lessor 4/9, 2015 at 13:2

M

0

Or

Function send object

<img onLoad="ozhpixel(this)"

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

Medea answered 28/10, 2014 at 9:37 Comment(0)

R

0

write

max-width:100%

in img tag

Republican answered 23/3, 2022 at 5:29 Comment(1)

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – Flax 23/3, 2022 at 5:43

Recommended topics

Hot tags