将特定html文件上的幻灯片图像调整为移动屏幕

我有这个问题。我有一张有4个图像的幻灯片，我已经让幻灯片本身调整到移动屏幕，但没有调整幻灯片中的图像，我该怎么做？

this is my html slide:
    <div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><img class="myScalableImage" src="images/slide/photos/imagem_corporativa_grande.jpg" alt="Image One"  width="" height="" /></li>
                <li><img class="myScalableImage" src="images/slide/photos/web_design_grande.jpg" alt="Image Two"  width="" height="" /></li>
                <li><img class="myScalableImage" src="images/slide/photos/fotografia_grande.jpg" alt="Image Three"  width="" height="" /></li>
                <li><img class="myScalableImage" src="images/slide/photos/video_grande.jpg" alt="Image Four"  width="" height="" /></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
        </ul>
    </div>
</div>

And my Javascript:

$(document).ready(function(){
var img = new Image();
img.onload = function () {
var width = this.width;
var height = this.height;
}
img.src = document.getElementById('myScalableImage').src;
var divHeight = $("#slider").height();
var divWidth = $("#slider").width();    
$('#myScalableImage').attr('width', divWidth);
$('#myScalableImage').attr('height', divHeight);
return false;
});