親要素を大きくはみ出す子要素を適正な大きさにしたい（HTML・SCSS）

前提・実現したいこと

親要素を大きくはみ出す子要素を適正な大きさにしたい

発生している問題・エラーメッセージ

親要素back-centerの子要素であるalbumに対し、widthを設定するとalbum 内のimgタグが表示されなくなるという問題が発生しています。

該当のソースコード

html
1<div class="first-view">
2<div class="back back-left">
3    <div class= "header-logo">
4      <h1>タイトル</h1>
5    </div>
6    <div class="left-exp">
7      <p>テキスト</p>
8    </div>
9  </div>
10
11  <div class= "back back-center">
12    <div class="header">
13      <ul class= "about">
14        <a href="#about" style="text-decoration:none;">about</a>
15        <a href="#menu" style="text-decoration:none;">menu</a>
16        <a href="#home" style="text-decoration:none;">BLOG</a>
17        <a href="#home" style="text-decoration:none;">STAFF</a>
18        <a href="#home" style="text-decoration:none;">address</a>
19      </ul>
20    </div>
21    <div class="album">
22      <img class="img1" src="/assets/image1.JPEG">
23      <img class="img2" src="/assets/image2.JPEG">
24      <img class="img3" src="/assets/image3.JPEG">
25      <img class="img4" src="/assets/image4.JPEG">
26    </div>
27  </div>
28
29  <div class="back back-right">
30  </div>
31</div>

scss
1.first-view {
2  height: 1050px;
3  .back {
4    float: left;
5    height: 1050px;
6  }
7
8  .back-left {
9    width: 30%;
10    background-color: white;
11    position:relative;
12  }
13
14  .header-logo h1{
15    font-family: 'Train One';
16    font-size: 33px;
17    font-weight: 300;
18    text-align: center;
19    margin-top: 40px;
20  }
21
22  .left-exp{
23    color: #4e4b4b;
24    position:absolute;
25    bottom: 3%;
26    right:5%;
27  }
28
29  .back-center {
30    width: 65%;
31    background-color: antiquewhite;
32    text-align: center;
33    position:relative;
34    .header{
35      display: flex;
36      font-size: 25px;
37      position:absolute;
38      z-index: 1;
39      width: 100%;
40      .about {
41        margin: 0 auto;
42        margin-top: 30px;
43      }
44      a {
45        margin: 10px;
46        color:white;
47        text-shadow: 1px 1px #828282;
48        position: relative;
49        display: inline-block;
50        text-decoration: none;
51      }
52      a:hover {color:white;}
53      a::after {
54        position: absolute;
55        bottom: 2px;
56        left: 0;
57        content: '';
58        width: 100%;
59        height: 2px;
60        background: white;
61        opacity: 0;
62        visibility: hidden;
63        transition: .3s;
64      }
65      a:hover::after {
66        bottom: -4px;
67        opacity: 1;
68        visibility: visible;
69      }
70    }
71  }
72
73  .album {
74    margin: auto;
75    background-color: white;
76    position: absolute;
77  }
78
79  .album img {
80    animation-name: album;
81    -webkit-animation-name: album;
82    animation-duration: 20s;
83    -webkit-animation-duration: 20s;
84    animation-iteration-count: infinite;
85    -webkit-animation-iteration-count: infinite;
86    opacity: 0;
87  }
88
89  .album .img1 {
90    display: block;
91    margin: 0 auto;
92  }
93
94  .album .img2 {
95    animation-delay:5s;
96    -webkit-animation-delay:5s;
97    position: absolute;
98    top: 0;
99    left: 0;
100  }
101
102  .album .img3 {
103    animation-delay:10s;
104    -webkit-animation-delay:10s;
105    position: absolute;
106    top: 0;
107    left: 0;
108  }
109
110  .album .img4 {
111    animation-delay:15s;
112    -webkit-animation-delay:15s;
113    position: absolute;
114    top: 0;
115    left: 0;
116  }
117
118  .back-right {
119    width: 5%;
120    background-color: white;
121  }
122}
123
124@keyframes album {
125  0% {
126    opacity: 0;
127  }
128
129  6.25% {
130    opacity: 1;
131  }
132
133  18.75% {
134    opacity: 1;
135  }
136  25% {
137    opacity: 0;
138  }
139}
140
141@-webkit-keyframes album {
142  0% {
143    opacity: 0;
144  }
145
146  6.25% {
147    opacity: 1;
148  }
149
150  18.75% {
151    opacity: 1;
152  }
153  25% {
154    opacity: 0;
155  }
156}

試したこと

chromeの検証機能でalbumに対しbox-sizingやdisplay、overflowなどのプロパティを設定してみましたが、うまく表示されませんでした。

何かご教示いただけることがあれば、よろしくお願いいたします。

m.ts10806

2021/06/19 03:45

>SCSS タグを追加してください。 https://teratail.com/tags/SCSS もしSCSS関係なくアドバイスを求めるのでしたら、コンパイル後のCSSを提示してください。

itagagaki

2021/06/19 03:51

アニメーションのキーフレーム定義が無く、また、opacity: 0; であるため、画像がそもそも表示されず、現象を再現することができませんでした。他者も現象を再現できるようにコードを修正してください。あと、おそらくHTMLは全体をさらに <div class="first-view"> で囲む必要があるのですよね？