(画像あり) ウィンドウ幅を縮めると画像の下に隙間があく (JavaScript)

Question

現在、レスポンシブでサイトを制作しております。
TOPページに、キービジュアルとなる画像があり、その下にメニューなどのコンテンツを配置しているのですが、

ウィンドウ幅を縮めると画像サイズは比率を保ったまま縮み、縮んだ分だけ下のコンテンツとの隙間があいてしまいます。

おそらく画像の高さをピクセルで指定しているからなのですが、

どのようにすれば、PC表示時の隙間のまま、スマホ表示できるでしょうか？

ちなみに、画像はスライド式(フェードイン・アウトの動作)にしたく、ネットで拾ってきたJavaScriptを入れているのですが、その中にCSSが書かれているようで、そこを変更したらいけるのかな・・と思っております。

$(function(){
// 設定
var $width =750; // 横幅
var $height =300; // 高さ
var $interval = 3000; // 切り替わりの間隔（ミリ秒）
var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#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);
});

img {
	height: auto;
	max-width: 100%;
}

#slide {
max-width:750px;
margin:0 auto;
}

<div id="slide">
	<ul>
		<li><img src="1.jpg"></li>
		<li><img src="2.jpg"></li>
		<li><img src="3.jpg"></li>
	</ul>
</div> 

どうぞ宜しくお願い致します。

Comments

[m.ts10806]

html、cssもなるべく全てご提示ください。※プラグイン利用部分は参考先URLとカスタマイズした部分があればその内容をご提示ください。

[chanmar]

ご指摘ありがとうございます。他コードも追記いたしました。

[m.ts10806]

このコードそのままだとjavascriptエラーが出ます。（$width is not defined）　エラーのないコードをご提示いただくと共に、あとレスポンシブの指定部分はありますか？

[m.ts10806]

あと、直下のコンテンツもスライドの下に隠れてしまいますね。現在の状況が再現可能なHTML,CSSをご提示いただけると助かるのですが・・。

Answer 1

…ネットで拾ってきたJavaScriptを入れている…

提示コードの誤記述や提示部分以外が絡んでいる可能性もありますので、一度、このJavascript部分を外してHTML（画像1つ）とCSSのみで状況を確認してみてはどうでしょうか？

この状態で期待どおりのレスポンシブになってからJavascriptを再度適用し、どこの部分が影響しているのかを1つ1つ確認した方が、今後のために良いと思います。

Answer 2

var $height =300; // 高さ

の箇所で高さサイズ固定されているようなので、これを画像のサイズと合致させるだけでいけるのではないかと思います。具体的には

var $height = $("#slide ul li img").height();

上記でウィンドウサイズを変更してリロードすれば追随するのではないかと思います。
ウィンドウのリサイズに追随するには根本的に見直しが必要なように思います。