change image dimensions with jquery

2019-02-22 10:40发布

站内问答 / jQuery
1618 4 2

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?

4条回答
Juvenile、少年°
2楼-- · 2019-02-22 11:01

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'});
};
查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
3楼-- · 2019-02-22 11:05 
<!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/

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
4楼-- · 2019-02-22 11:11

Or

Function send object 

<img onLoad="ozhpixel(this)"

function ozhpixel(imaj){
$(imaj).width(100); // Units are assumed to be pixels
$(imaj).height(50);}
查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
5楼-- · 2019-02-22 11:21

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);
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)