質問編集履歴
2
アドバイス適用後のブラウザでの表示画像を追加しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
できればjQueryは使わない方向でお願いしたいです。
|
|
15
15
|
よろしくお願いしたいです。
|
|
16
16
|
|
|
17
|
+
## 追記
|
|
18
|
+
アドバイスいただいた内容のブラウザの表示状態を下記に追加します
|
|
19
|
+
|
|
17
20
|
## 現状困っていること
|
|
18
21
|
- 縦幅が正方形より大きくなる
|
|
19
22
|
- 文字がガブに表示されている
|
1
期待する動作に追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
BootStrap4を使用してアプリを作っています。
|
|
2
|
-
レスポンシブに対応した正方形の枠
|
|
2
|
+
- divタグでレスポンシブに対応した横幅最大400pxの正方形の枠(画像アップロード用の背景)を作成
|
|
3
|
+
- その枠の中央に文字を配置する
|
|
4
|
+
|
|
5
|
+
ということをしたいのですが、
|
|
3
6
|
- [[CSS/HTML]上下左右中央揃えまとめ。 - Qiita](https://qiita.com/super-mana-chan/items/0d35a0b9ac1bf97593c8#display-flex)
|
|
4
7
|
- [HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。 - かもメモ](https://chaika.hatenablog.com/entry/2016/07/15/163004)
|
|
5
8
|
- [CSSでサイズ可変の正方形の描き方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン](https://techacademy.jp/magazine/29044)
|
|
@@ -22,6 +25,10 @@
|
|
|
22
25
|
- 横幅は上限400pxまで
|
|
23
26
|
- 正方形の枠を維持したまま、作成した枠の中央に複数業の文字を配置したい
|
|
24
27
|
|
|
28
|
+
下記のコードだと下記のようになって欲しいです
|
|
29
|
+
- `div.upload-backgroundcolor`の表示をレスポンシブな正方形として表示
|
|
30
|
+
- `div.upload-image`の中の文字(内容)を`div.upload-backgroundcolor`の中央に配置・表示したい
|
|
31
|
+
|
|
25
32
|
## 該当するコード
|
|
26
33
|
```HTML
|
|
27
34
|
<div class="row">
|