使貓頭鷹傳送帶圖像響應

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到高度：汽車。 就是這樣。