引導轉盤不響應於高度

我想使一個自舉轉盤響應於高度，這樣它會重新縮放圖像，同時保持縱橫比改變寬度和窗口轉盤是在高度時。引導轉盤不響應於高度

旋轉木馬默認情況下會對寬度做出響應，但我遇到了一個問題，我無法對高度變化做出響應。

我曾嘗試過對類似問題的一些建議，但他們卻沒有幫我解決這個問題。

對我怎麼想的轉盤圖像A的jsfiddle表現：

HTML：

<div> 
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" class="responsive-img" /> 
</div>

CSS：

.responsive-img { 
    position: absolute; 
    max-height: 100%; 
    max-width: 100%; 
}

當你調整結果框你會看到圖像的大小取決於高度和t他寬度是在容器的

一個的jsfiddle與carousel

HTML：

<div id="myCarousel" class="carousel slide"> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" /> 
     </div> 
     <div class="item "> 
      <img src="http://www.mildred.co/issueassets/22/14RSowlhat.jpg" /> 
     </div> 
    </div> 
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

</div>

當你調整結果中，您將看到圖像僅僅依靠調整大小在容器的寬度上。

來源

2015-04-16 Bryandh

我沒有看到這兩個例子擺弄任何區別。但是，您可以嘗試將圖像設置爲標準尺寸。例如，1280 * 300像素，並看看如何響應。就目前來看，你的圖像大約只有200-300像素。 –

我相信圖像大小無關緊要。理解小提琴的關鍵是改變結果容器的寬度和高度。 – Bryandh

您可以使用背景圖像作爲輪播中呈現寬度和高度的div。在這裏你可以看看它可以實現的方式。 http://jsfiddle.net/cuytnzja/4/

.carousel-img{ 
 
    width: 100%; 
 
    height:500px; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myCarousel" class="carousel slide"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
    </ol> 
 
    <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      
 
      <div class="carousel-img" style="background: url('http://zoarchurch.co.uk/content/pages/uploaded_images/91.png') no-repeat 50% 50% fixed"> 
 
       
 
      </div> 
 
     </div> 
 
     <div class="item "> 
 
      <div class="carousel-img" style="background: url('http://www.mildred.co/issueassets/22/14RSowlhat.jpg') no-repeat 50% 50% fixed"> 
 
          
 
      </div>    
 
     </div> 
 
    </div> 
 
    <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
 

 
</div>

來源

2015-04-16 09:57:25 Nitesh

這不完全是我在這裏要做的事情，事情是，我希望旋轉木馬中的圖像根據旋轉木馬的寬度和高度來調整大小。您的JSFiddle所做的是將圖像保持爲寬度和高度的靜態大小。 – Bryandh

引導轉盤不響應於高度

回答

相關問題