【CSS】ウィンドウ幅に合わせた正方形での画像表示方法

CSSでブラウザに画像を表示する際、window幅に合わせた大きさの正方形で表示の実装をしているのですが、一点わからないことがありますので、質問させていただきます。

実際に実装しているコードが下記になります。ruby on railsでウェブアプリケーションを作っています。

haml
1.images__box
2  - if event.images.any?
3    - event.images.each do |image|
4      %li.image_box
5        = image_tag image.photograph.url 
6  - else
7    まだ写真が投稿されていません。

scss
1    .images__box{
2      margin-bottom: 20px;
3      display: flex;
4      .image__box{
5        width: 23%;
6        position: relative;
7        margin-right: 3%;
8        img{
9          object-fit: cover;
10          position: absolute;
11          top: 0;
12          left: 0;
13          width: 100%;
14          height: 100%;
15        }
16      }
17      .image__box::before{
18        padding-bottom: 100%;
19        content: "";
20        display: block;
21      }
22    }

この記述で正方形の画像に切り取られるはずなのですが、ブラウザで確認すると長方形となってしまっています。そこで、padding-bottomを80%とすることでなんとか長方形にできたのですが、なぜ80%にすると正方形になるのかが腹落ちしません。ちなみにbefore疑似要素は以下の画像のようになっています。

なぜ投稿後の上部分が無視されるのでしょうか。何卒、よろしくお願いいたします。
下記サイトを参考にしました。
https://recooord.org/css-images-trimming/

HTML、CSS全体のコードを載せておきます。

html
1= render partial: "shared/header"
2
3.image__list__page
4  .new__image__post
5    = link_to new_image_path, class: "new__image__post__button" do
6      %i.fas.fa-arrow-circle-up
7      UPLOAD
8  .image__contents
9    .image__contents__title
10      PHOTOGRAPHY
11    - @events.each do |event|
12      .event__name
13        = event.event_name
14      .images__box
15        - if event.images.any?
16          - event.images.each do |image|
17            %li.image__box
18              = image_tag image.photograph.url 
19        - else
20          まだ写真が投稿されていません。
21    .and__more
22      .and__more__button
23        more...
24
25= render partial: "shared/footer"

scss
1.image__list__page{
2  font-family: 'Libre Baskerville', 'A1 Mincho', serif;
3  margin-top: 100px;
4  .new__image__post{
5    height: 100px;
6    text-align: center;
7    display: flex;
8    align-items: center;
9    &__button{
10      color: black;
11      text-decoration: none;
12      width: 180px;
13      height: 50px;
14      background-color: #CCFFFF;
15      display: block;
16      border-radius: 20px;
17      font-size: 20px;
18      line-height: 50px;
19      margin: 0 auto;
20      box-shadow: 1px 1px #888888;
21      border: solid 1px #AAAAAA;
22    }
23  }
24  .image__contents{
25    padding: 0 15% 50px 15%;
26    &__title{
27      font-size: 25px;
28      padding: 10px 0 10px;
29    }
30    .event__name{
31      font-size: 20px;
32      padding: 10px 0 10px;
33    }
34    .images__box{
35      margin-bottom: 20px;
36      display: flex;
37      .image__box{
38        width: 23%;
39        position: relative;
40        margin-right: 3%;
41        img{
42          object-fit: cover;
43          position: absolute;
44          top: 0;
45          left: 0;
46          width: 100%;
47          height: 100%;
48        }
49      }
50      .image__box::before{
51        padding-bottom: 80%;
52        content: "";
53        display: block;
54      }
55    }
56    .and__more{
57      display: flex;
58      justify-content: center;
59      .and__more__button{
60        width: 150px;
61        height: 30px;
62        font-size: 12px;
63        border: solid 1px;
64        text-align: center;
65        line-height: 30px;
66        background-color: #EEEEEE;
67        border-radius: 5px;
68        margin-top: 30px;
69      }
70    }
71  }
72}

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

回答1件

ベストアンサー

CSS不得意なので控えていましたが回答がないのでヒントになれば

      .image__box{
        width: 23%;
        position: relative;
        margin-right: 3%;
        img{
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

ここがimageの大きさ制御だと思います。
img を縦横100%にしていますが、その親の「image__box の縦横比が1:1ではない」、のではないでしょうか。
ともに100%なので、親の縦横比に従います。

投稿2020/07/26 07:19