[解決済み] スリックスライダー内の背景画像

質問

<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 です。私の目標は、各スライドに異なる背景画像を表示し、その画像にコンテンツをオーバーレイさせることです。背景画像はウェブからアクセスする必要があるため、background-image css プロパティを設定してもうまくいかないようです。largeCarouselContent内の各divがスライドになります。canvas1.jpegがすべてのスライドにまたがっているため、現在の解決策はうまくいきません。私は困っている、任意のアイデア？

解決方法は？

よく理解すると、あなたは背景画像が欲しいのですね？もしそうなら、背景画像を表示するために 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;
}