前提・実現したいこと
初心者です・・・
メインビジュアルをCSS(background-image)でスライドさせていますが、思った通りに表示されません(汗)
発生している問題・エラーメッセージ
データをサーバーにアップして、スマホでサイトを確認するとスマホで見たときだけ、background-imageが自動的に画像の中央上部が拡大されて表示されています。 widthを100%、heightを100vhにしていて、背景画像を一画面全体に表示したいのですが、検証ツールではちゃんと一画面に写真が表示されていても、いざサーバーにアップすると勝手に画像が一部分拡大されて表示されてしまいます・・・いろいろ試して見ましたがどうにも解決できなかったので質問させていただきました・・・ スマホ用background-imageのサイズはW750px H1334pxです。 メディアクエリはmax-width:768pxで設定しています。
該当のソースコード
●HTMLーーーーーーーーーーーーーーーーー <div id="mv"> <ul class="slider"> <li></li> <li></li> <li></li> </ul> ●PCサイト用CSSーーーーーーーーーーーーー #mv { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .slider { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; z-index: 0; } .slider li { background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-attachment: fixed; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-duration: 24s; -webkit-animation-duration: 24s; } .slider li:nth-child(1) { background-image: url("../images/kv01.jpg"); animation-name: slider-zoomin; -webkit-animation-name: slider-zoomin; animation-delay: -3s; -webkit-animation-delay: -3s; } .slider li:nth-child(2) { background-image: url(../images/kv02.jpg); animation-name: slider-zoomin; -webkit-animation-name: slider-zoomin; opacity: 0; animation-delay: 5s; -webkit-animation-delay: 5s; } .slider li:nth-child(3) { background-image: url(../images/kv03.jpg); animation-name: slider-zoomin; -webkit-animation-name: slider-zoomin; opacity: 0; animation-delay: 13s; -webkit-animation-delay: 13s; } @keyframes slider-zoomin { 0% { opacity: 0; transform: scale(1); transform: -webkit-scale(1); } 20.83% { opacity: 1; } 33.33% { opacity: 1; } 45.83% { opacity: 0; } 100% { opacity: 0; transform: scale(1.2); transform: -webkit-scale(1.2); } } ●スマホ用CSSーーーーーーーーーーーーー .slider li:nth-child(1) { background-image: url("../images/sp-kv01.jpg"); } .slider li:nth-child(2) { background-image: url(../images/sp-kv02.jpg); } .slider li:nth-child(3) { background-image: url(../images/sp-kv02.jpg); }
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/04 00:41
2019/09/04 01:11