質問: position:absolute; left:0; top:0; } パソコン画面の方は私の理想通りに動きます。 レスポンシブルの時に画像の横幅が収縮して(ただしサイズ比を変えない)いかないだけなのですが、わかりません。誰か教えていただけないでしょうか?よろしくお願いいたします。
回答: 画像(img要素)のサイズを指定していないのが原因です。幅を#slideのサイズに合わせたいなのら、下記のように100%に指定すればいいでしょう。縦横比を維持するには`height: auto;`も追加します。 ``` #slide { max-width:800px; margin:0 auto; position:relative; } #slide ul { width:100%; padding-top: 17.25%; } #slide img { width: 100%; height: auto; } @media screen and (max-width: 768px) { #slide { width: 100%; } } ``` `padding-top: 17.25%;` の数値は画像の縦横比を設定してください。 横800px 縦146pxの場合 149 / 800 * 100 = 18.25 jQueryの方でもwhdth, height を設定していますが、その部分は削除してください。 ``` $(function(){ // 設定 var $interval = 8000; // 切り替わりの間隔(ミリ秒) var $fade_speed = 3000; // フェード処理の早さ(ミリ秒) $("#slide ul li").css({"position":"relative","overflow":"hidden"}); $("#slide ul li").hide().css({"position":"absolute","top":0,"left":0}); $("#slide ul li:first").addClass("active").show(); setInterval(function(){ var $active = $("#slide ul li.active"); var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first"); $active.fadeOut($fade_speed).removeClass("active"); $next.fadeIn($fade_speed).addClass("active"); },$interval); }); ``` CodePenサンプル