滑らかなスライダー内の背景画像

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; 
}