スマホ等の画面サイズ幅”いっぱい”にスライドショー幅を可変したい

スライドショーを作成しました。
こちらでお手伝い頂き、スマホの幅に収まるよう可変する方法で作成しました。

欲張って申し訳ないのですが、スマホ幅いっぱいいっぱいに画像を表示させることは可能でしょうか。
現状ですとスマホの幅に収まる様可変しますが、スマホの画面幅より小さくなるので両サイドに背景が表示されます。


<STYLE TYPE="text/css">
#stage {
    position: relative;
    width: 600px;
    height:338;
    margin: 0 auto;
}
#photo1,#photo2,#photo3,#photo4,#photo5 {
    position: absolute;
    width: 600px;
    height: 338px;
}
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img {
    opacity:0;
    -moz-animation: imgTrans 30s infinite;
    -webkit-animation: imgTrans 30s infinite;
    animation: imgTrans 30s infinite;
}
#photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
#photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
#photo4 img{
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
#photo5 img {
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#frame {
    width: 600px;
    height: 338px;
    position: relative;
    overflow: hidden;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@media screen and (max-width: 767px) {
   #stage {
      width: auto;
      height: auto;
   }
   #frame {
      width: auto;
   }
   #photo1, #photo2, #photo3, #photo4, #photo5 {
      width: auto;
   }
   img {
      max-width: 100%;
   }
}

<div id="stage">
  <div id="frame">
      <div id="photo1"><img src="image1.jpg"></div>
      <div id="photo2"><img src="image2.jpg"></div>
      <div id="photo3"><img src="image3.jpg"></div>
      <div id="photo4"><img src="image4.jpg"></div>
      <div id="photo5"><img src="image5.jpg"></div>
    </div>
</div>

もし必要でしたら、PC表示も画面幅いっぱいに可変しても構いません。

うまく表現できず申し訳ないのですが、
背景の余白もなく両サイドが少し欠けてもよいので
写真を画面幅いっぱいに表示させたいです

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

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

回答2件

ベストアンサー

css
1@media screen and (max-width: 767px) {
2   #stage,
3   #frame,
4   #stage #frame img {
5      width: 100%;
6   }
7}
8コード

投稿2017/04/04 11:44

yuki84web

総合スコア1857

yoso

2017/04/04 12:10

ありがとうございます。 widthをautoではなく、100%にすると言うことでしょうか。ご記入いただいたものを使用しましても、写真幅はスマホの表示画面幅より少し短くなります。うまく表現できず申し訳ないのですが、背景の余白もなく両サイドが少し欠けてもよいので写真を画面幅いっぱいに表示させたいのですが無理なのでしょうか。無知で申し訳ありませんがよろしくお願いいたします。