白丸背景の中に画像とテキストを配置したい

実現したいこと

HTMLとCSSを使って白丸背景の中に画像とテキストを配置したいのですが、楕円になってしまい、正円にすることができません。

配置している画像が長方形だとこのような現象が起こるとネット上に書いていたため、imgタグにwidthとheightそれぞれに100pxを指定し、正方形にしていますが、楕円になってしまいます。

ご教授いただけると幸いです。よろしくお願い致します。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>白背景に画像とテキスト設置</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <div class="box">
12        <div class="image-profile">
13            <img class="image" src="https://placehold.jp/150x150.png" alt="" width="100px" height="100px">
14            <div class="profile">男性</div>
15        </div>
16        <div class="text">ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。</div>
17    </div>
18</body>
19</html>

CSS
1.box{
2    display: flex;
3    background-color: aqua;
4    border-radius: 20px;
5    width: 100%;
6    height: auto;
7}
8
9.image-profile{
10    background-color: white;
11    border-radius: 50%;
12}
13
14.image{
15    border-radius: 50%;
16    padding: 10px;
17    margin: 10px;
18}
19
20.profile{
21    text-align: center;
22}

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

回答2件

.image-profile も正方形になるように幅と高さを設定しましょう。
ただし、親に flex を設定しているので、幅が自動縮小される場合があるのでflex-shrink: 0;で縮小しないようにしておく必要があります。

中身のレイアウトが不明なので、とりあえずの設定例

css
1.image-profile{
2    background-color: white;
3    border-radius: 50%;
4    flex-shrink: 0;
5    height: 200px;
6    width: 200px;
7    display: flex;
8    flex-direction: column;
9    justify-content: center;
10    align-items: center;
11}

投稿2022/09/27 14:14

総合スコア33699

2022/09/27 15:00

早急な回答、ありがとうございました。 flex-shrinkは知らなかったので、調べてみます。ご教授いただきありがとうございました。

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

ベストアンサー

デモページを作成しました。併せてご覧ください。

Demo on JSFiddle

コード例

html
1<div class="box">
2  <div class="image-profile">
3    <img class="image" src="https://placehold.jp/150x150.png" alt="" width="100px" height="100px">
4    <div class="profile">男性</div>
5  </div>
6  <div class="text">ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。</div>
7</div>

css
1.box {
2  display: flex;
3  padding: 10px;
4  background-color: aqua;
5  border-radius: 20px;
6  width: 100%;
7  height: auto;
8}
9
10.image-profile {
11  width: 150px; /* 画像と文字を入れるコンテイナーのサイズ指定 */
12  height: 150px; /* 画像と文字を入れるコンテイナーのサイズ指定 */
13  margin-right: 10px; /* コンテイナーと文章の間の余白 */
14  position: relative; /* 子要素の移動の基点に設定する */
15  background-color: white;
16  border-radius: 50%;
17  overflow: hidden; /* 子要素のはみ出た部分は非表示にする */
18}
19
20.image {
21  width: 100%; /* コンテイナーの横幅いっぱい（150%） */
22  height: 100%; /* コンテイナーの高さいっぱい（150%） */
23  object-fit: cover; /* ↑の指定だけだと、長方形の画像の場合縦横比が崩れた形で変形されてしまうので、親要素の形状に切り抜かれるようにする */
24  /* padding: 10px; */
25  /* margin: 10px; */
26}
27
28.profile {
29  position: absolute; /* 親要素の上に重ねる */
30  left: 50%; /* 左から50%の位置に移動（つまり右に移動） */
31  bottom: 10px; /* 下から10pxの位置に移動 */
32  transform: translateX(-50%); /* 右に行き過ぎているので、文字の長さの半分だけ左に移動 */
33  text-align: center;
34}
35
36.text {
37  width: calc(100% - 150px); /* 文章エリアの横幅は、親要素全体の幅から画像の幅を引いたもの */
38}

解説

画像エリアと文章エリアの横幅を決める

.image-profileの横幅が150pxなので、
.textの横幅は、.box全体の横幅から150pxを引いたものになります。

これをCSSに計算させてやるためにcalc()を使用し、以下のように記述します。

css
1.text { width: calc(100% - 150px); }

追記：
他の回答者様の.image-profileにflex-shrink: 0をつける方法の方がスマートだと感じました…！

画像エリア（画像と文字をいれるコンテイナー）の設定

.image-porofileの縦横を150pxに指定する以外に以下のことをします。

position:relative
- 子要素をposition: absoluteで座標による移動をする時に、画像エリアが基点となるように指定するためposition: relativeを指定します。
- これをかかないと、子要素はbodyを起点に座標移動してしまいます。
border-radius: 50% & overflow: hidden
- コンテイナー自体を丸い形にし、はみ出た子要素の部分は非表示にするようにします。
- これにより、画像も文字もまる形からはみ出た部分は非表示にになります。

画像のサイズを指定する

.imageにて縦横のサイズを100%としました。これによりコンテイナーサイズと同じサイズ（＝150px）となります。
このままだと長方形の画像だと、縦横150pxに併せてぐちゃっと変形した画像になってしまいます。
- object-fit: coverをつけると、変形ではなく、指定したサイズに切り抜かれます。
- つまり今回の場合150px x 150pxに切り抜かれます。

文字を移動させる

.profileの文字を、コンテイナーに対して水平は中央、垂直は下の方移動させます。

position: absoluteを指定すると、基点から座標移動できます。
- デフォルトでは基点は<body>なのですが、
- 今回は事前にコンテイナーの.image-profileにposition: relativeを書いておいたので、それが基準となります。
- ちなみにpositionはデフォルトではposition: staticであり、static以外だったらrelativeに限らず何でも起点となれます。
bottom: 10pxで、コンテイナーの下から10pxの場所を指定。
水平要素を中央寄せするために以下のことをしています。
- left: 50%で文字の左端が、中央にいくようにしています。
  - こんな感じ→[----------|text------]
- これだと行き過ぎているので、文字の長さの半分だけ左に戻してやります。
  - こんな感じ→[--------te|xt--------]
  - そのための記述がtransform: translateX(-50%)です。