Question

基于以下代码＆amp;使用bootstrap，我有一个包含多个.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＆＃39;

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

或者您可以在加载每张图片时调整图像大小

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

检查你可以使用的引导程序

$(window).resize()

执行相同的操作并在浏览器上调整大小将重新运行js in load。这是我测试图像响应性的方法。

使用图像最大宽度和保持高度比率的响应

1 个答案: