滑块内的背景图像

Question

<div id="largeCarousel" style="display:inline-block; float:right;">
        <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;">
            <div id="largeCarouselContent" style="position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:hidden; overflow-y:hidden">
                <div style="color:white;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div>

                <div>
                    <div style="position:relative; top:0; left:0;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div>
                    <img src="~/Content/images/Canvas1.jpg" style="position:absolute; top:0; left:0; height:100%; width:100%;" />
                </div>                    
                <div><img src="~/Content/images/logo.jpeg" style="width:100%;" /></div>
            </div>
        </div>
    </div>

上面有一个包含滑块的内容框。内容框的纵横比为1/.52。我的目标是在每张幻灯片上有一个不同的背景图像，内容覆盖在图像上。背景图像还必须通过web访问，所以设置背景图像css属性似乎不起作用。#LargeCarouselContent中的每个div都是一个幻灯片。当前的解决方案不起作用，因为canvas1.jpeg覆盖所有幻灯片。我被难住了，有什么主意吗？

Answer 1

如果我很理解你，你想要一张背景图片，对吧？如果是的话，为什么不使用CSS背景图像而不是内联图像呢？并为每张幻灯片使用background-size:cover；。因此，无论您的图像有什么纵横比，它都将填满整个容器。

.homepage-item {
    background: url("~/Content/images/Canvas1.jpg") no-repeat center / cover;
    box-sizing: border-box;
    padding-bottom: 52%;
    position: relative;
}