最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Set height and width of image inside div using javascript and jquery - Stack Overflow

programmeradmin3浏览0评论

I have a problem were I want to set the height and width of image inside the div using only Javascript and JQuery.

Here is my code:

<div class="myGallery">
    <img class="replaced" src="myimage.jpg" style="display: inline;">
</div>

.myGallery {
    display: table-cell;
    height: 220px;
    text-align: center !important;
    vertical-align: middle !important;
    width: 110px;
}

.myGallery img {
    text-align: center;
    vertical-align: middle;
    width: auto !important;
}


function ChangeHW(hdnValue)
{

    if (hdnValue==1)
    {
        //i want to remove height and width attribute of image
            //this is working..
            $('div.myGallery > img').removeAttr('width');
            $('div.myGallery > img').removeAttr('height');
    }
    else
    {
        //i want to set height and width attribute of image 
            //this is not working..i cant set width-height using this line od code
            $('div.myGallery > img').css('width', '110px');
            $('div.myGallery > img').css('height', '220px');
    }

}

Any ideas?

I have a problem were I want to set the height and width of image inside the div using only Javascript and JQuery.

Here is my code:

<div class="myGallery">
    <img class="replaced" src="myimage.jpg" style="display: inline;">
</div>

.myGallery {
    display: table-cell;
    height: 220px;
    text-align: center !important;
    vertical-align: middle !important;
    width: 110px;
}

.myGallery img {
    text-align: center;
    vertical-align: middle;
    width: auto !important;
}


function ChangeHW(hdnValue)
{

    if (hdnValue==1)
    {
        //i want to remove height and width attribute of image
            //this is working..
            $('div.myGallery > img').removeAttr('width');
            $('div.myGallery > img').removeAttr('height');
    }
    else
    {
        //i want to set height and width attribute of image 
            //this is not working..i cant set width-height using this line od code
            $('div.myGallery > img').css('width', '110px');
            $('div.myGallery > img').css('height', '220px');
    }

}

Any ideas?

Share Improve this question edited Oct 5, 2012 at 16:19 Bradley A. Tetreault 4641 gold badge5 silver badges19 bronze badges asked Oct 21, 2011 at 5:03 ravidevravidev 2,7386 gold badges28 silver badges42 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 2

Attributes are different than style. Say your current image tag looks like this:

<img src="foo.png" width="200" height="200" />

After $('div.myGallery > img').removeAttr('width'), it will look like this:

<img src="foo.png" height="200" />

You are removing the width attribute. Now after $('div.myGallery > img').css('width', '440px'), it'll look like this:

<img src="foo.png" height="200" style="width: 440px;" />

You're adding in width, but it's the CSS style and not the attribute. Try this instead:

$('div.myGallery > img').attr('width', '440');

This is a function to fit an image to 586x586 div tag.

function img_fit(img_id){

    var img_width = $("#"+img_id).width();
    var img_height= $("#"+img_id).height();
    var max_side = Math.max(img_width, img_height);
    var top = 0, left = 0, scale = 0;
    var new_width, new_height,new_scale;
    scale = (max_side == img_height)? img_height/586 : img_width/586;

    if(max_side == img_height){
         new_width = img_width / scale;
         new_height = 586;
         top = 0;
         left = Math.round((586 - new_width)/2);
         $("#"+img_id).animate({
            'width':new_width,
            'height':new_height, 
            'top':0,
            'left':left,
            'duration':300
        });
         //$("#"+img_id).width(new_width);
         //$("#"+img_id).height(586);
         new_scale = 586*scale/img_height;
    }
    else{
        new_height  = img_height / scale;
        new_width = 586;
        top = Math.round((586 - new_height)/2);
        //top = 0;
        left = 0;
        $("#"+img_id).animate({
            'width':new_width,
            'height':new_height, 
            'top':top,
            'left':0,
            'duration':300
        });

    }

}

Try this:

$('div.myGallery > img').css('width', '110px !important');

$('div.myGallery > img').css('height', '220px !important');

You look to be setting the image width larger than the containing div, could that be the problem?

Yo remove the height and width removeAttr would work if it was set in the image tag <img src="puppies.jpg" width="100" height="100">, otherwise, to change it in the css, I would set width and height = auto, or if you want the container to determine the size try something like width:100% height:auto. To add height and width your .css('width','440px') should work. However as mentioned the containing div is smaller.

Maybe this could help:

.newCssClass { height : 110px !important; width : 440px !important; }

$("div.myGallery img").addClass("newCssClass");
发布评论

评论列表(0)

  1. 暂无评论