jqueryのスライドショーの画像が大きくなりません

jquerymでのスライドショーにて画像サイズが画面の幅いっぱいにならず、原因が分からないため質問します。
３枚の画像がフェードイン、フェードアウトする形のアニメーションなのですが、
CSSにてwidht100%に指定したところ、１枚の画像は画面の幅いっぱいになるのですが
２枚目、３枚目に表示される画像は元画像の大きさのままで余白ができてしまいます。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="description" content="">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    <!--font-awesome-->
10    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
11        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
12    <!--css-->
13    <link rel="stylesheet" href="./css/style.css">
14    <!--js-->
15    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
16    <title>Document</title>
17</head>
18<body>
19     <div class="main-image">
20        <ul id="slide_wrapp">
21            <li class="slide_item">
22                <img src="img/photo-1499002238440-d264edd596ec.jpeg" alt="">
23            </li>
24            <li class="slide_item">
25                <img src="img/photo-1569199545475-e2f7bb242e5f.jpeg" alt="">
26            </li>
27            <li class="slide_item">
28                <img src="img/photo-1499002238440-d264edd596ec.jpeg" alt="">
29            </li>
30        </ul>
31    </div>
32
33
34    <!--js-->
35    <script src="js/script.js"></script>
36</body>
37</html>

scss
1@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
2
3@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
4
5*,
6*::before,
7*::after {
8	box-sizing: border-box;
9}
10
11html,
12body {
13	margin: 0;
14	padding: 0;
15}
16
17body {
18	-moz-osx-font-smoothing: grayscale;
19	-webkit-font-smoothing: antialiased;
20	background: hsl(60, 100%, 100%);
21	font-family: "kozL" "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
22	font-size: 16px;
23	font-weight: normal;
24	line-height: 1.5;
25	overflow-x: hidden;
26}
27
28
29
30article,
31aside,
32footer,
33header,
34nav,
35section,
36main {
37	display: block;
38}
39
40h1,
41h2,
42h3,
43h4,
44h5,
45h6,
46a,
47p,
48span,
49em,
50small,
51strong,
52sub,
53sup,
54mark,
55del,
56ins,
57strike,
58abbr,
59dfn,
60blockquote,
61q,
62cite,
63code,
64pre,
65ol,
66ul,
67li,
68dl,
69dt,
70dd,
71div,
72section,
73article,
74main,
75aside,
76nav,
77header,
78hgroup,
79footer,
80img,
81figure,
82figcaption,
83address,
84time,
85audio,
86video,
87canvas,
88iframe,
89details,
90summary,
91fieldset,
92form,
93label,
94legend,
95table,
96caption,
97tbody,
98tfoot,
99thead,
100tr,
101th,
102td {
103	border: 0;
104	margin: 0;
105	padding: 0;
106}
107
108
109
110
111
112
113
114// スライドプラスズーム
115#slide_wrapp{
116  position: relative;
117  overflow: hidden;
118  
119    
120
121  .slide_item{
122
123    opacity: 0;
124    transform: scale(1);
125    transition: opacity 2s linear, transform 7.5s linear;  //秒数に注意
126    position: relative;
127    z-index: 1;
128    
129    .rem{
130        width: 100%;
131    }
132
133    &:not(:first-child){
134      position: absolute;
135      top: 0;
136      left : 0;
137    }
138  
139    &.show_{
140      opacity: 1;
141    }
142    &.zoom_{
143      transform: scale(1.1);
144    }
145    img{
146      display: block; //下に余白ができないよう
147      width: 100%;
148    }
149  }
150}
151
152
153
154// スライドプラスズーム

js
1// スライドショー
2
3window.addEventListener('load', function () {
4    sliderStart();
5});
6
7function sliderStart() {
8
9    const slide = document.getElementById('slide_wrapp');      //スライダー親
10    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
11    const totalNum = slideItem.length - 1;                     //スライドの枚数を取得
12    const FadeTime = 2000;                                     //フェードインの時間
13    const IntarvalTime = 5000;                                 //クロスフェードさせるまでの間隔
14    let actNum = 0;                                            //現在アクティブな番号
15    let nowSlide;                                              //現在表示中のスライド
16    let NextSlide;                                             //次に表示するスライド
17
18    // スライドの1枚目をフェードイン
19    slideItem[0].classList.add('show_', 'zoom_');
20
21    // 処理を繰り返す
22    setInterval(() => {
23        if (actNum < totalNum) {
24
25            let nowSlide = slideItem[actNum];
26            let NextSlide = slideItem[++actNum];
27
28            //.show_削除でフェードアウト
29            nowSlide.classList.remove('show_');
30            // と同時に、次のスライドがズームしながらフェードインする
31            NextSlide.classList.add('show_', 'zoom_');
32            //フェードアウト完了後、.zoom_削除
33            setTimeout(() => {
34                nowSlide.classList.remove('zoom_');
35            }, FadeTime);
36
37        } else {
38
39            let nowSlide = slideItem[actNum];
40            let NextSlide = slideItem[actNum = 0];
41
42            //.show_削除でフェードアウト
43            nowSlide.classList.remove('show_');
44            // と同時に、次のスライドがズームしながらフェードインする
45            NextSlide.classList.add('show_', 'zoom_');
46            //フェードアウト完了後、.zoom_削除
47            setTimeout(() => {
48                nowSlide.classList.remove('zoom_');
49            }, FadeTime);
50
51        };
52    }, IntarvalTime);
53
54}
55
56// スライドショー
57

２枚目、３枚目の画像にクラス名を指定したりして見ましたが、改善は見られませんでした。
宜しくお願いいたします。

kei344

2019/11/23 11:26

提示されているCSSはSCSSやSASSでは？

mimuratakasi

2019/11/23 12:29

ご指摘ありがとうございます。修正致しました。

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

回答1件

ベストアンサー

absoluteにすると高さ幅を指定し無い場合、内包要素のサイズになるため、サイズが予期しないものになっていたのでは。

SCSS
1    &:not(:first-child){
2      position: absolute;
3      top: 0;
4      left : 0;
5      right: 0; /* ADD */
6      bottom: 0; /* ADD */
7    }
8```**動くサンプル：**[https://jsfiddle.net/dy83pjz1/](https://jsfiddle.net/dy83pjz1/)