Within the code snippet below and utilizing Bootstrap, a grid layout is defined with several .block components, each comprising an image and a title. The images are designed to be larger than the column size so that they can expand to full width for responsive screen sizes (achieved through the accompanying CSS). Each image may possess varying heights and widths.
Everything works as expected unless you explicitly set the height of the image in the attributes. Doing so distorts the proportions of the image.
Currently, there's a necessity to establish image heights using JavaScript for correct loading. Without specifying these heights, the JavaScript loads too quickly, resulting in incorrect element heights.
To mitigate this issue, I'm resorting to utilizing setTimeout() to delay the JavaScript execution by 1.5 seconds. However, this approach isn't optimal since it might not be sufficient for users with slower internet connections.
My Query: Is there a method to either (A) postpone JavaScript execution until all images on the page have fully loaded or (B) determine image heights in a manner that adjusts alongside image width while maintaining proportional correctness via 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>
... Additional block elements ...
</div>
</div>
CSS:
.block img{
max-width: 100%;
}