CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
TH1981
TH1981

Reputation: 3193

Using image max-width and keeping height ratios for responsive

Based on the code below & using bootstrap, I have a grid layout with multiple .block components, each containing an image and a title. The images are larger than the column size so that they can resize to full width for responsive screen sizes (done with the CSS listed below). each image may be different heights & widths.

This works just fine as long as you don't define the image height in the attributes. As soon as you add the height it distorts the image proportions.

Now however, I need to set the image heights for some javascript so that it loads properly. Without setting the heights, the js is loading too quickly and the element heights are incorrect basically.

Right now I'm getting around this by using a setTimeout() to delay the js script by 1.5 seconds. This obviously isn't ideal as for someone with a slow connection it won't be long enough.

My Question: Is there a way to either (A) delay the js until all images have loaded on the page or (B) set the height for each image in a way that it will resize with the image width and keep my proportions correct for the image with 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%;
}

Upvotes: 0

Views: 122

Answers (1)

zardilior
zardilior

Reputation: 2978

To delay the Js to run until all images are loaded you should use jquery's 

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

or you can resize images when each one is loaded

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

to check the bootstrap you can use 

$(window).resize()

to do the same and that way resizing on the browser will rerun the js in load. This is how I test responsiveness with images.

Upvotes: 1

Related Questions