Question

I have got this half working but, when I try and create an if statement to change the width to be ‘100%’ and the height to be ‘auto’ and visa versa depending on which part of the image is bigger it just doesn’t change. causing the image to go off the page.

Here is the code I am trying to get working

(function() {

var img = document.getElementById('maincontent').firstChild;
img.onload = function() {
if(img.width > img.height) {
    img.width = '100%';
    img.height = 'auto';
}
};
}());

So I am grabing the img which is the child of the div maincontent then changing it’s width and height values if needed. But it just doesn’t seem to activate.

I have this other piece of code which does work fine and I added the width and height change to the end of the code and it still doesn’t work. When I add the border part to it it does add the border so I know the code should work.

$('#thumbs img').click(function(){ 
 /* On a thumbnail click */
var src = $(this).attr("src").match(/[^\.]+/) + "large.jpg";
$('#maincontent img').attr("src", src);
$('#thumbs img').removeClass('inact').addClass('act');
$(this).removeClass('act').addClass('inact');
$('#maincontent img').width = '100%';
$('#maincontent img').height = 'auto';
$('#maincontent img').attr('border', '10px');

});
});

So changing the src of the image works,
so does the attribute of the border but the width and height doesn’t change. Anyone know why? If people need more to work with let me know.

Answer 1

You have to write :

$('#maincontent img').width('100%');
$('#maincontent img').height('auto');

See the documentation of these two functions :

• height : http://api.jquery.com/height/
• width : http://api.jquery.com/width/