javascriptをレスポンシブに合わせて使いたい。

お世話になります。

表題ですが、レスポンシブルサイトを作っておりまして、
以下のjavasciptを使って綺麗に
指定画像をモーフィングしたいのですが、ブラウザのサイズを変えても画像が追従してくれません。

PCサイトでは見る位置が一定なので
サイズを指定して実装することができたのですが、
スマホサイトでは、縦と横向きで
どのようにすれば自動的にリサイズし調整できるのかご教授いただきたいです。

jquery Mobileを使って、スマホサイトを組んでいます。

html
1<!DOCTYPE html>
2<html>
3	<head>
4        ...
5        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
6        ...
7        <link rel="stylesheet" href="css/sp.css" />
8        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
9        <script src="http://code.jquery.com/jquery-1.10.0.js"></script>
10        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
11        <script type="text/javascript" src="js/slide-js.js"></script>
12   </head>

slide-jsというjavascirptを使用させていただいております。

javascript
1$(function(){
2// 設定
3var $width =1020; // 横幅
4var $height =360; // 高さ
5var $interval = 3000; // 切り替わりの間隔（ミリ秒）
6var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
7var repeatFlg = true;
8$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
9$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
10$("#slide ul li:first").addClass("active").show();
11setInterval(function(){
12var $active = $("#slide ul li.active");
13var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
14$active.fadeOut($fade_speed).removeClass("active");
15$next.fadeIn($fade_speed).addClass("active");
16
17function stop_slide(obj){
18  obj.stopAuto();
19}
20
21},$interval);
22});
23 
24

そして、htmlに組んでおります。

html
1
2</head>
3<div class="main_wrap">
4     <div id="slide">
5      <ul>
6        <li><a href=""><img src="img/top/〇〇.jpg" alt="" width="1020" height="360" /></a></li>
7      <li><a href=""><img src="img/top/〇〇.jpg" alt="" width="1020" height="360" /></a></li>
8      <li><a href=""><img src="img/top/〇〇.jpg" alt="" width="1020" height="360" /></a></li>
9      <li><a href=""><img src="img/top/〇〇.jpg" alt="" width="1020" height="360" /></a></li>
10     </ul>
11</div>

指定のspのcssはこちらです。

css
1.main_wrap {
2  width: 100%;
3  margin: 0 auto;
4}
5
6/* slider*/
7
8#slide {
9position:relative;
10width: 100%;
11height:360px;
12margin-top: 50px;
13}
14
15#slide img {
16position:absolute;
17left:0;
18top:0px;
19}
20

この状態だと、ブラウザを大きくしたり小さくしても画像のサイズが一定になっておりまして、

これをどうすれば、
指定画像をブラウザのサイズに合わせて追従させることができるのか解決していただきたいです。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

高さはCSSで処理すればよいです。下記 padding-bottom 部分はサンプルに作ったものの画像比率を元に計算しているのでそこは適宜変更してください。

CSS
1.main_wrap {
2  width: 100%;
3  margin: 0 auto;
4}
5
6/* slider*/
7
8#slide {
9position:relative;
10width: 100%;
11/*height:360px;*/
12padding-bottom: 42.857%;/* 150 / 350 x  100 = 42.857... */ /* ADD */
13margin-top: 50px;
14}
15
16#slide ul { /* ADD */
17	margin: 0;
18	padding: 0;
19}
20
21#slide li { /* ADD */
22	display: block;
23	width: 100%;
24	height: 100%;
25}
26
27#slide img {
28position:absolute;
29left:0;
30top:0;
31	width: 100%; /* ADD */
32}

JavaScript
1$(function(){
2// 設定
3var $width =1020; // 横幅
4var $height =360; // 高さ
5var $interval = 3000; // 切り替わりの間隔（ミリ秒）
6var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
7var repeatFlg = true;
8// $("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
9$("#slide ul li").css({"position":"relative","overflow":"hidden"}); // width/heightを外す
10$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
11$("#slide ul li:first").addClass("active").show();
12setInterval(function(){
13var $active = $("#slide ul li.active");
14var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
15$active.fadeOut($fade_speed).removeClass("active");
16$next.fadeIn($fade_speed).addClass("active");
17
18function stop_slide(obj){
19  obj.stopAuto();
20}
21
22},$interval);
23});
24```**動くサンプル：**[https://jsfiddle.net/xg8qsd8z/](https://jsfiddle.net/xg8qsd8z/)