Set height and width of image inside div using javascript and jquery

Question

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?

Answer 1

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

Answer 2

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

    }

}

Answer 3

Try this:

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

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

Answer 4

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.

Answer 5

Maybe this could help:

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

$("div.myGallery img").addClass("newCssClass");