Javascript 我的形象不是'；当我更改窗口大小时，在图像旋转木马中按预期进行缩放_Javascript_Html_Css_Image_Grid

Javascript 我的形象不是'；当我更改窗口大小时，在图像旋转木马中按预期进行缩放

javascript html css image grid

Javascript 我的形象不是'；当我更改窗口大小时，在图像旋转木马中按预期进行缩放,javascript,html,css,image,grid,Javascript,Html,Css,Image,Grid,我希望在更改窗口大小时，图像旋转木马中的图像能够缩放。如果我在CSS中添加以下内容 .carousel-slide img { display: block; width: 100%; } 然后，出于某种原因，我认为浏览器将div class=“carousel slide”作为img的父对象而不是图形，并且我得到了图形宽度中显示的所有4个图像。或者可能是因为我使用的是CSS网格？如何纠正这种行为 HTML: 欢迎，请创建一个演示（在片段或小提琴上）以显示一个实时示例欢迎，请创建

我希望在更改窗口大小时，图像旋转木马中的图像能够缩放。如果我在CSS中添加以下内容

.carousel-slide img {
   display: block;
   width: 100%;
}

然后，出于某种原因，我认为浏览器将

div class=“carousel slide”

作为img的父对象而不是图形，并且我得到了图形宽度中显示的所有4个图像。或者可能是因为我使用的是CSS网格？如何纠正这种行为

HTML:

欢迎，请创建一个演示（在片段或小提琴上）以显示一个实时示例欢迎，请创建一个演示（在片段或小提琴上）以显示一个实时示例

<html lang="en"> 
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
</head>
<body>
    <main>
        <section id="image-carousel">
            <button id="leftButton">
                PREV
            </button>
            <div id="carousel">
                <div class="carousel-slide">
                    <figure> 
                        <img id="lastClone" src="image-4.jpg" alt=""> 
                        <br>
                        <figcaption>
                            figcap1
                        </figcaption>
                    </figure>
                    <figure> 
                        <img src="image-1.jpg" alt="">
                        <br>
                        <figcaption>
                            figcap2
                        </figcaption>
                    </figure>
                    <figure> 
                        <img src="image-4.jpg" alt=""> 
                        <br>
                        <figcaption>
                            figcap4 
                        </figcaption>
                    </figure>
                    <figure> 
                        <img id="firstClone" src="image-1.jpg" alt="">
                        <br>
                        <figcaption>
                            figcap5
                        </figcaption>
                    </figure>
                </div>
            </div>
            <button id="rightButton">
                NEXT
            </button> 
        </section> 
   </main>
</body>
</html>

#image-carousel{
    display: grid;
    grid-template-areas: 
        ". leftButton carousel rightButton .";  
    grid-template-columns: 0.4fr 0.5fr 60vw 0.5fr 0.4fr; 
    grid-template-rows: auto;
}
#carousel{
    grid-area: carousel;
    overflow: hidden;
}
.carousel-slide{
    display: flex;
    width: 100%;
    height: 550px;
}
.carousel-slide img{
    z-index: 1; 
    /*width: 100%;  this is treating carousel-slide as parent instead of figure? why?*/
}
.carousel-slide figure{
    width: 100%;
}
#leftButton{
    grid-area: leftButton;
    z-index: 3;
}
#rightButton{
    grid-area: rightButton;
    z-index: 3;
}
#carousel figcaption{
    background-color: rgba(15, 27, 27, 0.7);  
    text-align: center;

    height: 50px;
    width: auto;
    position: relative;
    bottom: 50px;
    z-index: 2;
}