レスポンシブな正方形を作成し、その中央に文字を配置したい

BootStrap4を使用してアプリを作っています。

divタグでレスポンシブに対応した横幅最大400pxの正方形の枠(画像アップロード用の背景)を作成
その枠の中央に文字を配置する

ということをしたいのですが、

などを参考に試してみたのですがうまくいきません(m_ _m)

原因は縦幅・横幅ともにレスポンシブに対応するために値を設定していないことが原因の一つかもしれませんが、正直CSSは初心者です。

できればjQueryは使わない方向でお願いしたいです。
よろしくお願いしたいです。

追記

アドバイスいただいた内容のブラウザの表示状態を下記に追加します

現状困っていること

縦幅が正方形より大きくなる
文字がガブに表示されている
やりたいことはまさにこれだが、レスポンシブににするため高さ指定しないのが影響で正方形にならない[CSS/HTML]上下左右中央揃えまとめ。 - Qiita

期待する動作

jQueryなしで実装する
レスポンシブに対応した正方形の枠を作成できる(横幅いっぱいの予定)
横幅は上限400pxまで
正方形の枠を維持したまま、作成した枠の中央に複数業の文字を配置したい

下記のコードだと下記のようになって欲しいです

div.upload-backgroundcolorの表示をレスポンシブな正方形として表示
div.upload-imageの中の文字(内容)をdiv.upload-backgroundcolorの中央に配置・表示したい

該当するコード

HTML
1<div class="row">
2  <div>
3  :
4  </div>
5  <div class="upload-backgroundcolor">
6    <div class="upload-image">
7      <div class="text-center">
8        <i class="fas fa-camera"></i>
9      </div>
10      <p class="text-center">ファイルをアップロード</p>
11    </div>
12  </div>
13</div>

CSS
1.upload-backgroundcolor{
2  background-color: #f5f5f5;
3  width: 100%;
4// width: calc(100vmin - 60px);
5// height:  calc(100vmin - 60px);
6// display: flex;
7// justify-content: center;
8// align-items: center;
9// position: relative;
10// &:before{
11//   display: block;
12//   content: '';
13//   padding-top: 100%;
14}
15
16
17
18
19.upload-image{
20  width: 100%;
21  padding-top: 100%;
22  background-color: yellow;
23  // position: absolute;
24  // top: 0;
25  // height: 100%;
26  // box-sizing: border-box;
27  // width: 100%;
28  // display: block;
29  // height: 0;
30  // width: 100%;
31  // padding-bottom: 100%;
32  // align-items: center;
33}
34

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

回答1件

ベストアンサー

何を正方形にしたいのか不明確ですが、
upload-backgroundcolor を正方形にして、最大幅を400pxにする場合のコード例

css
1.upload-backgroundcolor{
2  background-color: #f5f5f5;
3  width: 100%;
4  max-width: 400px;
5  margin: 0 auto;
6 display: flex;
7 justify-content: center;
8 align-items: center;
9 position: relative;
10}
11.upload-backgroundcolor:before{
12   display: block;
13   content: '';
14   padding-top: 100%;
15}

追記

上の条件に加えて、下記の条件を追加

div.upload-image の width, height は指定しない＝中身の幅、高さに合わせる
div.upload-image は div.upload-backgroundcolor の上下左右中央に配置する

HTMLを少し修正します。

html
1<div class="row">
2  <div>
3  :
4  </div>
5  <div class="upload-backgroundcolor">
6    <div class="upload-image">
7      <div class="text-center">
8        <i class="fas fa-camera"></i>
9        <p class="text-center">ファイルをアップロード</p>
10      </div>
11    </div>
12  </div>
13</div>

div.text-center 内に、アイコン（i）とテキスト(p)を入れる。

CSSは下記を追加。

css
1.upload-image {
2  background-color: yellow;
3  display: flex;
4  justify-content: center;
5  align-items: center  
6}

投稿2020/08/21 12:18

総合スコア33699

2020/08/21 22:02 編集

ご回答いただきありがとうございます。教えていただいた通りにやってみると・.div.upload-backgroundcolor自体は正方形で表示しようとしている・div.upload-image が.upload-backgroundcolorの上下左右中央に配置されない（正方形よりしたの下部に表示される）・div.upload-imageは正方形の下に延長して表示されひきづられる形でdiv.upload-backgroundcolorが伸びて全体が縦長になってしまうように感じるといった状況です。 div.upload-imageがdiv.upload-backgroundcolorの中央に来るようにできますでしょうか?

hatena19

2020/08/22 00:16 編集

div.upload-imageの形とサイズはどうしたいのでしょうか。例えば、div.upload-backgroundcolor の80％のサイズの正方形、というように具体的に明示してもらわないと回答できません。

begenner

2020/08/22 02:17

説明不足で申し訳ありません(m_ _m) 命名の地点で問題があるかもしれませんが、現在div.upload-imageに関しては・正方形でなくてもよい・width, heightともにmax400px以下・div.upload-backgroundcolorの上下中央に配置するということが期待する動作になります。

hatena19

2020/08/22 03:09

div.upload-image の width, height は指定しない＝中身の幅、高さに合わせるということでよろしいですか。この解釈で回答に追記しておきます。

begenner

2020/08/22 04:04

ありがとうございます!! まさにこれです!! ありがとうございました!!

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