Сделайте снимки совы-карусели отзывчивыми

Question

Я пытаюсь заставить свою сову-карусель быть отзывчивой (в Bootstrap-3). Я пробовал его с шириной: 100% и высотой: авто, но без успеха. Можно ли сделать их отзывчивыми?

Я только размещаю здесь соответствующий код.

.container-carousel { 
 
\t width:100% 
 
} 
 

 

 
#main-slider .carousel .slider-img { 
 
    text-align:right; 
 
    position:absolute 
 
} 
 

 
#main-slider .carousel .item { 
 
    background-position:50%; 
 
    background-repeat:no-repeat; 
 
    background-size:cover; 
 
    left:0!important; 
 
    opacity:0; 
 
    top:0; 
 
    position:absolute; 
 
    width:100%; 
 
    display:block!important; 
 
    height:730px; 
 
\t margin-bottom:20px; 
 
    -webkit-transition:opacity ease-in-out 500ms; 
 
    -moz-transition:opacity ease-in-out 500ms; 
 
    -o-transition:opacity ease-in-out 500ms; 
 
    transition:opacity ease-in-out 500ms 
 
} 
 

 
#main-slider .carousel .item:first-child { 
 
    top:auto; 
 
    position:relative 
 
} 
 

 
#main-slider .carousel .item.active { 
 
    opacity:1; 
 
    -webkit-transition:opacity ease-in-out 500ms; 
 
    -moz-transition:opacity ease-in-out 500ms; 
 
    -o-transition:opacity ease-in-out 500ms; 
 
    transition:opacity ease-in-out 500ms; 
 
    z-index:1 
 
} 
 

 
#main-slider .prev,#main-slider .next { 
 
    position:absolute; 
 
    top:50%; 
 
    background-color:#c52d2f; 
 
    color:#fff; 
 
    display:inline-block; 
 
    margin-top:-25px; 
 
    height:40px; 
 
    line-height:40px; 
 
    width:40px; 
 
    line-height:40px; 
 
    text-align:center; 
 
    border-radius:0; 
 
    z-index:5 
 
} 
 

 
#main-slider .active .animation.animated-item-1 { 
 
    -webkit-animation:fadeInUp 300ms linear 300ms both; 
 
    -moz-animation:fadeInUp 300ms linear 300ms both; 
 
    -o-animation:fadeInUp 300ms linear 300ms both; 
 
    -ms-animation:fadeInUp 300ms linear 300ms both; 
 
    animation:fadeInUp 300ms linear 300ms both; 
 
    background:#fff; 
 
    background:rgba(255,255,255,.7) 
 
} 
 

 
#main-slider .active .animation.animated-item-2 { 
 
    -webkit-animation:fadeInUp 300ms linear 600ms both; 
 
    -moz-animation:fadeInUp 300ms linear 600ms both; 
 
    -o-animation:fadeInUp 300ms linear 600ms both; 
 
    -ms-animation:fadeInUp 300ms linear 600ms both; 
 
    animation:fadeInUp 300ms linear 600ms both 
 
}

<div class="container-carousel"> 
 
<section id="main-slider" class="root-sec scroll-section no-margin"> 
 
     <div class="carousel slide"> 
 
      <ol class="carousel-indicators"> 
 
       <li data-target="#main-slider" data-slide-to="0" class="active"></li> 
 
       <li data-target="#main-slider" data-slide-to="1"></li> 
 
       <li data-target="#main-slider" data-slide-to="2"></li> 
 
\t \t \t \t <li data-target="#main-slider" data-slide-to="3"></li> 
 
       <li data-target="#main-slider" data-slide-to="4"></li> 
 
\t \t \t \t <li data-target="#main-slider" data-slide-to="5"></li> 
 
      </ol> 
 
      <div class="carousel-inner"> 
 

 
\t \t \t \t <div class="item active" style="background-image: url1> 
 
        <div class="container"> 
 
         
 

 
\t \t \t \t <div class="item" style="background-image: url2> 
 
        <div class="container"> 
 

 
\t \t \t \t <div class="item" style="background-image: url3> 
 
        <div class="container"> 
 
         
 

 
\t \t \t \t <div class="item" style="background-image: url4> 
 
        <div class="container"> 
 
        

Answer 1

, чтобы получить ширину экрана Вы должны использовать JavaScript, а затем использовать, чтобы определить ширину изображения:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 

<script> 

$(function(){ 

var screenWidth = screen.width; //get the screen width in pixels 
var pixelsPerPercentage = screenWidth*.01; //get the pixels per percentage 
var imageWidthInPer = 50; //set the variable of the width of the image in percentages 
var imageWidthInPix = imageWidthInPer*pixelsPerPercentage; //set the variable of the width of the image in pixels 

$(#+"image").width(imageWidth+"px"); //set the width of the image in pixels 

}); 

</script> 

Answer 2

Я решил ее просто путем изменения высоты: 730px к высота: авто. Вот и все.