CODEWITHSUNDEEP
jquerycssimageswap
DTH
DTH

Reputation: 49

swap image, change width and height

I have a div, and in this div is an image. What I have done now is that the image has a width of 100%. I want if I swap the image with another image that for instance has a bigger height than the div. I want the height to be 100% instead of the width. I do not want to make changes to the CSS, I want that these changes happen when I swap the image. Is this possible?

HTML

<div id="i3-box1">
    <img id="i3-logo" src="images/logo.png">
</div>

CSS

#i3-logo{width: 100%;}

JQuery

$("#i3-logo").attr("src", "images/logo2.png");

I use JQuery to swap the image because this action is for more than 1 HTML.

Upvotes: 0

Views: 537

Answers (2)

Faraz Sh.
Faraz Sh.

Reputation: 377

Maybe you can set the outer DIV height same as the loaded logo height.

I hope this helps:

$('#i3-box1').height($('#i3-logo').height());

it need to be executed after each time the new img loads.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can use .height(value) or .css( propertyName, value ) method

$("#i3-logo").attr("src", "images/logo2.png").height('100%');

OR

$("#i3-logo").attr("src", "images/logo2.png").css('height', '100%');

Upvotes: 1

Related Questions