Home>

I ask a question because the image size does not fill the width of the screen in the jquerym slideshow and the cause is unknown.
It is an animation that three images fade in and fade out.
When you specify widht100% in CSS, one image fills the screen width
The image displayed on the second and third images will have the same size as the original image, but will have a margin.

<! DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
    <meta name = "description" content = "">
    <meta http-equiv = "X-UA-Compatible" content = "ie = edge">
    <!-font-awesome->
    <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css"
        integrity = "sha384-oS3vJWv + 0UjzBfQzYUhtDYW + Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin = "anonymous">
    <!-css->
    <link rel = "stylesheet" href = "./ css/style.css">
    <!-js->
    <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <title>Document</title>
</head>
<body>
     
        <ul>
            <li>
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
        </ul>
    

    <!-js->
    <script src = "js/script.js"></script>
</body>
</html>
@ import url ("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
@import url ("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
*,
* :: before,
* :: after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: hsl (60, 100%, 100%);
    font-family: "kozL" "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    overflow-x: hidden;
}

article,
aside,
footer,
header,
nav,
section,
main {
    display: block;
}
h1,
h2,
h3,
h4,h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    margin: 0;
    padding: 0;
}



// Slide plus zoom
#slide_wrapp {
  position: relative;
  overflow: hidden;

  .slide_item {
    opacity: 0;
    transform: scale (1);
    transition: opacity 2s linear, transform 7.5s linear;// note the number of secondsposition: relative;
    z-index: 1;
    .rem {
        width: 100%;
    }
    &: not (: first-child) {
      position: absolute;
      top: 0;
      left: 0;
    }
    &.show_ {
      opacity: 1;
    }
    &.zoom_ {
      transform: scale (1.1);
    }
    img {
      display: block;// No white space underneath
      width: 100%;
    }
  }
}

// Slide plus zoom
// Slideshow
window.addEventListener ('load', function () {
    sliderStart ();
});
function sliderStart () {
    const slide = document.getElementById ('slide_wrapp');// Slider parent
    const slideItem = slide.querySelectorAll ('. slide_item');// slide element
    const totalNum = slideItem.length-1;// Get the number of slides
    const FadeTime = 2000;// Fade in time
    const IntarvalTime = 5000;// Interval before crossfading
    let actNum = 0;// currently active number
    let nowSlide;// Slide currently displayed
    let NextSlide;// Next slide to display
    // Fade in the first slide
    slideItem [0] .classList.add ('show_', 'zoom_');
    // repeat the process
    setInterval (() =>{
        if (actNum<totalNum) {
            let nowSlide = slideItem [actNum];
            let NextSlide = slideItem [++ actNum];
            // fade out with .show_ delete
            nowSlide.classList.remove ('show_');
            // At the same time, the next slide fades in while zooming
            NextSlide.classList.add ('show_', 'zoom_');
            // After fading out, delete .zoom_
            setTimeout (() =>{
                nowSlide.classList.remove ('zoom_');
            },

 FadeTime);
        } else {
            let nowSlide = slideItem [actNum];
            let NextSlide = slideItem [actNum = 0];
            // fade out with .show_ delete
            nowSlide.classList.remove ('show_');
            // At the same time, the next slide fades in while zooming
            NextSlide.classList.add ('show_', 'zoom_');
            // After fading out, delete .zoom_
            setTimeout (() =>{
                nowSlide.classList.remove ('zoom_');
            },

 FadeTime);
        };
    },

 IntarvalTime);
}
// slideshow

I tried to specify the class name for the second and third images, but there was no improvement.

  • Answer # 1

    If

    absoluteis specified and the height and width are not specified, it will be the size of the contained element, so the size was unexpected.

    &: not (: first-child) {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;/* ADD * /
          bottom: 0;/* ADD * /
        }

    Moving sample:https://jsfiddle.net/dy83pjz1/