Фоновое изображение в пределах скользкого слайдера

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. Моя цель - иметь другое фоновое изображение на каждом слайде с содержимым, наложенным на изображение. Фоновые изображения также должны быть доступны через Интернет, поэтому установка свойства css для фонового изображения не работает. Каждый div внутри #largeCarouselContent является слайдом. Текущее решение не работает, потому что 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; 
}