使用圖像最大寬度和保持高度比率爲響應

基於使用引導下面的代碼&，我有一個網格佈局與多個.block組件，每個組件包含一個圖像和標題。圖像大於列大小，因此它們可以調整爲全寬以獲得響應的屏幕大小（使用下面列出的CSS完成）。每幅圖像的寬度可能不同。使用圖像最大寬度和保持高度比率爲響應

只要你沒有在屬性中定義圖像高度，這種方法就行得通。只要你添加高度，就會扭曲圖像比例。

但是，現在我需要設置一些JavaScript的圖像高度，以便正確加載。沒有設置高度，js的加載速度過快，元素高度基本不正確。

現在我通過使用setTimeout()來延長js腳本1.5秒。對於連接速度慢的人來說，這顯然不是很理想，因此不夠長。

我的問題：有沒有辦法可以（A）延遲js，直到所有圖像加載到頁面上或（B）設置每個圖像的高度，以便調整圖像寬度並保持我的比例正確的圖像與CSS？

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image1.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image2.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image3.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image4.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image5.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image6.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image7.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image8.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image9.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.block img{ 
    max-width: 100%; 
}

來源

2014-12-21 TH1981

要延遲JS來運行，直到所有的圖像加載，你應該使用jQuery的

$(window).load(function(){ 
     //your code here 
});

，或者你可以調整圖像大小■當每一個被加載

$('img').each($(this).load(function(){ 
    //resizing code here with $(this).height or $(this).width() maybe 
});

檢查您可以使用

$(window).resize()

做相同，這樣調整的瀏覽器將重新運行JS負載引導。這是我用圖像測試響應能力的方式。

來源

2014-12-21 22:45:40 zardilior

使用圖像最大寬度和保持高度比率爲響應

回答

相關問題