画像の自動切り替えについて

質問

下記サイトの様な画像のフェイド切り替えをしたいのですが、
http://www.bluebamboo.co.jp/rule/template/jslist/file_016/index.html

画像の幅を100%にして、divの高さを指定せずのに切り替えて表示したいので、
cssでabsoluteを使用せず（absoluteを使用するとどうしてもdivの高さを指定しなければいけないため）、
上記サイトの様に画像を切り替えたいのですが、
良い方法をご存知の方、ご教授頂けると非常に助かります。

回答No.1

kuzumiHK · ベストアンサー

表示している画像の親要素をposition:staticにするように、
jsを改修すれば画像の高さが保持されると思います。

具体的にはmainimage.js内の、

(1)
if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds);
↓
if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds).css('position','absolute');

(2)
$('#rImg'+currentNo).fadeIn(fspeeds);
↓
$('#rImg'+currentNo).fadeIn(fspeeds).css('position','static');

にします。これでcssのheightを削除しても高さが維持されるようになります。

お礼

kuzumiHKさん

ご回答有難う御座います。
おかげさまで高さを保持することが出来ました！

さらに補足すると、

(1)
if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds);
↓
if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds).css({"position":"absolute","width":"100%"});

に変更すると幅も100%にすることが出来ました。

本当に助かりました。有難う御座いました。