Question

I’ve got some code which is supposed to make an image go smaller until it disappears from the screen. If I have the image in a div it will not work properly. If I take it out of the div it will work fine.

However I need it to work in a div. How can I fix this?

The code works fine if the img is not in a div, but when it is it screws up.

setTimeout(function(){
    $("#thrid").show('fast').animate({
    top : '-=-300',
    width: 0,
    height: 0
        },
        {duration: 1000});
},2000);

CSS:

#thrid{
    display:none;
    position:absolute;
    left: 592px;
    top: 160px;
}

HTML:

<div id="thrid">
    <img src="images/thrid.png" alt="thrid">
</div>

This is what it does with the div:
http://jsfiddle.net/xMV5Q/3/

This is what I want it to do:
http://jsfiddle.net/xMV5Q/1/

Answer 1

Try setting the img’s width and height to 100%:

#city2 img {
    height: 100%;
    width: 100%;
}