使用圖像最大寬度並保持高寬比以進行響應

Question

基於下面的代碼並使用引導程序，我有一個網格布局，其中包含多個.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%;
}

Answer 1

要延遲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。 這就是我測試圖像響應度的方法。