###前提・実現したいこと
お世話になっております。
jq-tiles.js
のプラグインを使用したタイル状のスライドショーを作成しております。
下記のコードにてPCでの実装は問題なくできたのですが
スマホサイズにした際に画像が小さくなりません。
これを画像が幅100%で全て見えるようにしたいです。
###該当のソースコード
javascript
1 $(function(){ 2 $('.slider').tilesSlider({ 3 x : 6, // x軸にタイルを動かす数値。最大20 4 y : 4, // y軸にタイルを動かす数値。最大20 5 fade : false, // フェードさせるかどうか 6 //auto : true, // スライドをオート再生させるかどうか 7 loop : true, // ループさせるかどうか 8 slideSpeed : 8500, // スライド速度 9 tileSpeed : 800, // タイルの動作速度 10 cssSpeed : 400, // css3 transition の速度 11 nav : true 12 }); 13 });
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link href="jquery.tiles.min.css" rel="stylesheet" type="text/css" /> 7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 8 <script type="text/javascript" src="js/jquery.tiles.js"></script> 9 <title></title> 10 11 12 <script> 13 $(function(){ 14 $('.slider').tilesSlider({ 15 x : 6, // x軸にタイルを動かす数値。最大20 16 y : 4, // y軸にタイルを動かす数値。最大20 17 fade : false, // フェードさせるかどうか 18 //auto : true, // スライドをオート再生させるかどうか 19 loop : true, // ループさせるかどうか 20 slideSpeed : 8500, // スライド速度 21 tileSpeed : 800, // タイルの動作速度 22 cssSpeed : 400, // css3 transition の速度 23 nav : true 24 }); 25 }); 26 27 </script> 28 <style> 29 30 .slider { 31 width: 100%; 32 max-width: 480px; 33 height: auto; 34 margin:0 auto; 35 } 36 .tiles-prev{ 37 left:0; 38 } 39 .tiles-nav { 40 position: absolute; 41 top: 91%; 42 left: 50%; 43 margin-top: 1em; 44 z-index: 10; 45 } 46 #slide img { 47 width:100%; 48 max-width:480px; 49 } 50 #slide { 51 position: relative; 52 max-width: 480px; 53 width: 100%; 54 height: 360px; 55 background-color: #fff; 56 overflow: hidden; 57 padding: 0; 58 background-image: url(../aaa.png); 59 background-size: 100%; 60 background-repeat: no-repeat; 61 background-position: center bottom; 62 margin: 0 auto; 63 text-align: center; 64 padding-bottom: 98px; 65 } 66 .slide_info { 67 color:#fff; 68 } 69 .slide_info a{ 70 display: block; 71 } 72 .tiles-description{ 73 padding-bottom: 38px; 74 } 75 76 @media screen and (max-width:375px){ 77 #slide img { 78 width:375px; 79 } 80 #slide { 81 position: relative; 82 max-width: 375px; 83 width: 375px; 84 height: 300px; 85 background-color: #fff; 86 overflow: hidden; 87 padding: 0; 88 background-image: url(../aaa.png); 89 background-size: 100%; 90 background-repeat: no-repeat; 91 background-position: center bottom; 92 margin: 0 auto; 93 text-align: center; 94 padding-bottom: 98px; 95 } 96 .slider{ 97 width: 375px!important; 98 } 99 } 100 101 </style> 102 103</head> 104 <body> 105 <div class="slider" id="slide"> 106 107 <p class="slide_info"> 108 <a href="" class="name1">1ああああああ</a> 109 <a href="" class="name2">1ああああああ</a> 110 </p> 111 112 <img src="http://placehold.jp/480x360.png" alt=""/> 113 114 115 <p class="slide_info"> 116 <a href="" class="name1">2ああああああ</a> 117 <a href="" class="name2">2ああああああ</a> 118 </p> 119 120 <img src="http://placehold.jp/480x360.png" alt=""/> 121 122 <p class="slide_info"> 123 <a href="" class="name1">3ああああああ</a> 124 <a href="" class="name2">3ああああああ</a> 125 </p> 126 127 <img src="http://placehold.jp/480x360.png" alt=""/> 128 </div> 129 130 </body> 131</html>
↑のjsはhtmlのインラインに書かれたものと同じです
http://designcolor-web.com/2015/09/14/jquery-for-rwd/
試していませんが、こちらの方法などを使ってスマホサイズの際にはサイズの小さな別の画像を表示するなどといった手段は使えず、画像は必ず480x360固定です。
ご教授頂けますと幸いです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/17 05:53 編集
2017/02/17 06:57