CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ravidev
ravidev

Reputation: 2738

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

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?

Upvotes: 1

Views: 11227

Answers (5)

Rohit
Rohit

Reputation: 165

Maybe this could help:

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

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

Upvotes: 0

Last Rose Studios
Last Rose Studios

Reputation: 2481

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.

Upvotes: 0

Rohit
Rohit

Reputation: 165

Try this:

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

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

Upvotes: 1

Fuzzy Logic
Fuzzy Logic

Reputation: 11

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

    }

}

Upvotes: 1

Matt Bradley
Matt Bradley

Reputation: 4495

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

Upvotes: 2

Related Questions