丸い背景色をwindowを広げても丸い形を維持したまま拡大したい。

お世話になります。今回の質問なんですが、丸い背景をwindowを広げた後も丸い形を
維持したまま拡大するようにしたいのですが、何度試みても丸が横に広がってしまいます。
どなたかお助け下さい。お願いします。

HTML5
1コード <body>
2
3  <div class="pagechanger" style="visibility: visible;">
4    <div class="pagechanger-riml" id="bigRiml">
5  </div>
6</div>

CSS3
1コード .pagechanger-riml {
2    background: #1dc9ff;
3    top: 50%;
4    left: 50%;
5    position: absolute;
6    transform: translate(-50%,-50%);
7    width: 50%;
8    height: 50%;
9    border-radius: 50%;
10    // &:before {
11    // content: "";
12    // display: block;
13    // padding-bottom: 100%;
14    // }
15}
16
17.pagechanger {
18    top: 0;
19    left: 0;
20    width: 100%;
21    height: 100%;
22    transform: translate3d(0,0,0);
23    position: absolute;
24}

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

回答1件

ベストアンサー

これでどうです?

CSS3
1.pagechanger-riml {
2    background: #1dc9ff;
3    top: 50%;
4    left: 50%;
5    position: absolute;
6    transform: translate(-50%,-50%);
7    width: 50%;
8    padding-top: 50%;
9    border-radius: 50%;
10
11}
12
13.pagechanger {
14    top: 0;
15    left: 0;
16    width: 100%;
17    height: 100%;
18    transform: translate3d(0,0,0);
19    position: absolute;
20}

投稿2019/12/01 05:58

exhaut

総合スコア15

dream

2019/12/01 06:09

迅速な対応恐れ入ります。padding-topを追加したらうまくいきました。差し支えなければ、paddingを加えた理由もお尋ねしてもよろしいですか？

exhaut

2019/12/01 06:25 編集

上下パディングのパーセンテージは横幅のパーセンテージとおんなじになるので https://am-yu.net/2013/10/06/css-percent/ paddingtopで100パーセントにすると横と縦がおんなじ大きさになります

dream

2019/12/01 07:17

なるほど、大きさが異なるのがうまくいかない原因だったのですね。回答から説明までありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

丸い背景色をwindowを広げても丸い形を維持したまま拡大したい。

関連した質問