Q&A
ご回答ありがとうございます。
background-size: contain;
で設定してみましたが、ブラウザの幅を小さくすると、同じ画像が下にいくつも繰り返し表示されます。
キーフレームのアニメーションを導入しました。
レスポンシブにしたいのですが、背景が見切れます。
background-size: cover;をいれてみたりはずしてみたり、
widthを100vwにしてみたりしましたが、改善しません。
あやしいのがareaクラス内のheightで、これを100％に指定すると画像自体が表示されなくなります。
キーフレーム内のtransform: translateY(-1000px) もあやしいですが、どう動かしたらいいのか…
どうかご教示お願いたします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="css/style5.css"> 7</head> 8<body> 9 10<div class="top-img-box"> 11 <div class="area"> 12 <ul class="circles"> 13 <li></li> 14 <li></li> 15 <li></li> 16 <li></li> 17 <li></li> 18 <li></li> 19 <li></li> 20 <li></li> 21 <li></li> 22 <li></li> 23 </ul> 24 </div> 25</div> 26 27</body> 28</html>
CSS
1/* CSSのリセット */ 2* { 3 box-sizing: border-box; 4 } 5 html, body, 6 ul, ol, li, 7 h1, h2, h3, h4, h5, h6, p, div { 8 margin: 0; 9 padding: 0; 10 } 11 12 body { 13 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 14 color: #333; 15 width: 100%; 16 } 17 18 19.top-img-box { 20 position: relative; 21 z-index: 0; 22 overflow: hidden; 23 width: 100%; 24 background-size: cover; 25} 26 27 28.area{ 29 width: 100%; 30 height: 100vh; 31 background-image: url(../img/3.jpg); 32 background-size: cover; 33} 34 35.circles{ 36 position: absolute; 37 top: 0; 38 left: 0; 39 width: 100%; 40 height: 100%; 41 overflow: hidden; 42} 43 44.circles li{ 45 position: absolute; 46 display: block; 47 list-style: none; 48 width: 20px; 49 height: 20px; 50 background: rgba(255, 255, 255, 0.2); 51 animation: animate 25s linear infinite; 52 bottom: -150px; 53 54} 55 56.circles li:nth-child(1){ 57 left: 25%; 58 width: 80px; 59 height: 80px; 60 animation-delay: 0s; 61} 62 63 64.circles li:nth-child(2){ 65 left: 10%; 66 width: 20px; 67 height: 20px; 68 animation-delay: 2s; 69 animation-duration: 12s; 70} 71 72.circles li:nth-child(3){ 73 left: 70%; 74 width: 20px; 75 height: 20px; 76 animation-delay: 4s; 77} 78 79.circles li:nth-child(4){ 80 left: 40%; 81 width: 60px; 82 height: 60px; 83 animation-delay: 0s; 84 animation-duration: 18s; 85} 86 87.circles li:nth-child(5){ 88 left: 65%; 89 width: 20px; 90 height: 20px; 91 animation-delay: 0s; 92} 93 94.circles li:nth-child(6){ 95 left: 75%; 96 width: 110px; 97 height: 110px; 98 animation-delay: 3s; 99} 100 101.circles li:nth-child(7){ 102 left: 35%; 103 width: 150px; 104 height: 150px; 105 animation-delay: 7s; 106} 107 108.circles li:nth-child(8){ 109 left: 50%; 110 width: 25px; 111 height: 25px; 112 animation-delay: 15s; 113 animation-duration: 45s; 114} 115 116.circles li:nth-child(9){ 117 left: 20%; 118 width: 15px; 119 height: 15px; 120 animation-delay: 2s; 121 animation-duration: 35s; 122} 123 124.circles li:nth-child(10){ 125 left: 85%; 126 width: 150px; 127 height: 150px; 128 animation-delay: 0s; 129 animation-duration: 11s; 130} 131 132 133 134@keyframes animate { 135 136 0%{ 137 transform: translateY(0) rotate(0deg); 138 opacity: 1; 139 border-radius: 0; 140 } 141 142 100%{ 143 transform: translateY(-1000px) rotate(720deg); 144 opacity: 0; 145 border-radius: 50%; 146 } 147 148} 149
回答2件
0
ベストアンサー
コメントより
普通のプレーンな（アニメーションなどをつけていない）画像だと、withを100%とすることで、ブラウザの幅を伸縮しても縦横比を維持したまま大きさが可変になりますよね？（レスポンシブになる）
そういうイメージでやってきたのですが、根本的に違うでしょうか？
img要素で width:100%; height:auto; と設定したときの動作ですかね。
背景画像でそれをするなら、padding-top で高さを指定します。下記を参考にしてください。
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld
css
1.area{ 2 width: 100%; 3 height: 0; 4 padding-top: calc(630 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */ 5 background: url(../img/3.jpg) center center / cover no-repeat; 6}
投稿2020/04/11 12:36
編集2020/04/11 12:44
総合スコア34075
0
background-size: cover;を使うと背景は見切れます。
background-size: contain;を使うといかがでしょうか?
参考URL:
https://www.keicode.com/script/css-background-size.php
画面サイズを小さくしたときに、右端だけが見切れてしまうので均等にしたい、という意味なら
background-position: center center;を追加すると、左も右も同じ幅見切れるように実装できます。
CSS
1.top-img-box { 2 position: relative; 3 z-index: 0; 4 overflow: hidden; 5 width: 100%; 6 background-size: cover; 7 background-position: center center; /* こちらを追加 */ 8}
投稿2020/04/11 11:17
編集2020/04/11 11:27
総合スコア4528
background-repeat: no-repeat;にしたらいいのでしょうかね。
ちょっと試してみます！
おそらく、やりたいことは以下のどちらかと思います。
試してみてほしいです。
[1] 背景画像が見切れず、繰り返さず、左右(もしくは上下)の余白は均等に表示
background-size: contain;
background-repeat: no-repeat; /* 背景に余白が生じたとき繰り返さない */
background-position: center center;
[2] 背景画像が見切れる代わりに余白は出ない
background-size: cover;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
で設定しましたら、ブラウザの横幅を小さくしていったときの画像の繰り返しはなくなりましたが、画像が元あった位置に空白ができてしまいます。
（要は繰り返し表示の画像が見えなくなっただけのようです）
残念です…
お二方、ありがとうございます。
background-position: center center;
にしてしまうと、実は画像に別の三角形を左上と右下に重ねているのですが、その三角形が画像の外に出てしまいます。
左上三角形
画像
右下三角形
のように順に表示されるようになってしまっているようです。
追記です。
background-position: center center;
をなくし、
background-size: contain;
background-repeat: no-repeat;
だけで
ブラウザの幅を思いっきり広げていくと今度は画像が表示されない空白エリアができてしまい、これもまた不都合です。
思っていた以上に難しいです…
background-image: url(../img/3.jpg);
の画像がこちらでは見えないので、こちらの回答の精度が低いかもしれません。
念のため、以下は認識されていますでしょうか?
・「背景が見切れてしまう」=余白エリアは生じない
・「画像が表示されない空白エリアができてしまう」=背景が見切れることはない
↓上記どちらも解決しようとすると
・「画像の縦横比が変わる」=背景は見切れないし、空白エリアはできない
----
「背景が見切れない」かつ「空白エリアを出さない」ためには背景画像の縦横比を変え、
ブラウザが横長だと画像が縦に潰れ、縦長だと横に潰れるようになりますが、それでもOKですか?
詳しくありがとうございます。
普通のプレーンな（アニメーションなどをつけていない）画像だと、withを100%とすることで、ブラウザの幅を伸縮しても縦横比を維持したまま大きさが可変になりますよね？（レスポンシブになる）
そういうイメージでやってきたのですが、根本的に違うでしょうか？
>ブラウザが横長だと画像が縦に潰れ、縦長だと横に潰れるようになりますが、それでもOKですか?
確かにそういうことだとちょっと困りますね。
企業のサイトなどではブラウザの幅を動かしても縦横比を維持したままアニメーションが画像に適用されているのをみるのですが、そういうのは相当プロの仕事というか、もっと難しいプログラムを使わないと無理なのでしょうか…。
↑上記なら、全然難しくないです！
hatena19さんの方法で解決できたようでよかったです。
何をしたいのかがよくわからず、混乱させてしまったかもしれません..
いえいえ、とんでもありません。
私がきちんと表現できていなかったため、お手間を取らせてしまい、申し訳ありませんでした。
色々と勉強になりました。
ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/11 12:47