jQuery写真スライドショーの画像サイズについて

はじめて質問させていただきます。
今、ホームページ作成中なのですが（ホームページビルダーで作成しています。）

HTMLもCSSも初心者で勉強中なのですが、トップページに複数の画像をスライドさせて
表示させようとjQueryを使用してトップページに表示させることはできました。

PCで見たときはうまく表示させているのですが、スマホで見た場合（iphone）
画像が横だけ縮小されて表示されるので困っています。

どこをどうすればスマホで縦横同じ比率で縮小されますか？

PCでの画像サイズはH357px　W960pxです。


/** THEME
===================================*/

.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 0px solid #fff;
left: -5px;
background: #fff;
height: 357px;
width: 960px;
position: absolute;
top: 0px;
left: 0;
z-index: 1;


今はこうなってます。

初心者なので質問の仕方がまちがっているかもしれませんが
教えていただけるとうれしいです！

よろしくお願いします。

No.1 ベストアンサー 回答者： nana_coco 回答日時： 2016/03/04 14:03

height: 357px;

width: 960px;

となっているので、ＰＣで表示された場合、高さ357px横幅960pxで表示されますよね。
質問者様のお話ですと、スマホで見た時は横幅だけ画面サイズに縮小されるとの事なので
おそらく、別の箇所（質問者様が書いたＣＳＳ以外）で、画面サイズが変更された場合の横幅の指定がされているのでしょう。

height: 357px;
width: 960px;

の部分を

height: 100%;
width: 100%;

に、とりあえず変更してみると、ＰＣとスマホだと、画面に対し１００％にはまりませんか？

この回答へのお礼

ご親切に教えていただきありがとうございます。

まだ悪戦苦闘しておりますが、教えていただいた方法で
探しながらやってみます。ありがとうございました。

お礼日時：2016/03/17 23:25