jquery - 指定された幅と高さの 1 つの固定位置に全幅の画像を配置することはできません

Question

フロントページのフェードスライドショーを作成しています。画像は全幅です。これが私のコードです。

<div id="slider">
    <img src="<?=base_url()?>assets/display/photo/slider/dental_clinick.jpg" alt="dental clinick" title="dental clinick" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/hospital_staff.jpg" alt="Hospital Staff Mohmand Hospital" title="Hospital Staff Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/laboratory_test.jpg" alt="Laboratory Test Mohmand Hospital" title="Laboratory Test Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/operation_theater.jpg" alt="Operation Theator Mohmand Hospital" title="Operation Theator Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/operation_theator_staff.jpg" alt="Operation Theator Staff Mohmand Hospital" title="Operation Theator Staff Mohmand Hospital" class="img"/>
    <img src="<?=base_url()?>assets/display/photo/slider/xray.jpg" alt="X-Ray Mohmand Hospital" title="X-Ray Mohmand Hospital" class="img"/>
</div>

ここにjqueryがあります。

$('.img:gt(0)').hide();
setInterval(function(){
  $('.img:first-child').fadeOut()
     .next('.img').fadeIn(5000)
     .end().appendTo('#slider');}, 
  2000);

画像が上下に配置されているようです。次の画像がフェードインするためにフェードアウトに変わると、下に移動して次の画像が出てくることを示します。この問題を解決するには？