css - 即使使用不同的 id 也无法设计 2 旋转木马

Question

我是新手，所以请多多包涵。

这是我的片段:

https://liveweave.com/WJav5F

我预期的行为是第一个轮播(id 轮播)具有容器的全宽，没有拉伸(stretch)或任何类型的扭曲。

当前的行为是，如果第二个轮播正确呈现，第一个轮播不会跨越容器的宽度。

我试过像这样使用 id 选择器，但它不起作用:

    #carousel .carousel-inner .item img{

       min-width:100%;

        }

#myCarousel .carousel .item img {   //comment this block and the id carousel  renders correct (no distortion) but break the id myCarousel. 
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

作为@Honzik Kryspin。

#carousel.carousel-inner .item img{

           min-width:100%;

            }

    #myCarousel.carousel .item img {    
            max-width: 100%;
            max-height: 100%;
            display: inline-block;
            position: absolute;
            bottom: 0;
            margin: 0 auto;
            left: 0;
            right: 0;
        }

Answer 1

您的选择器中有空格，这意味着它会在 #myCarousel 中搜索 .carousel。您可能希望第二个选择器为 #myCarousel.carousel .item img