Lazy loading images using the lazysizes plugin allows the browser to calculate the total page size without waiting for the images to

Having trouble with the lazysizes plugin and srcset on a fluid layout. The page keeps extending as you scroll instead of loading to the correct length

You can see my attempt using the bootstrap framework in this CodePen demo

After much research, it seems like the browser is unable to calculate the height because it's not set, but I can't seem to make it work responsively

Here is an example of the code with only 10 rows:

<div class="container-fluid">

  <div class="row-fluid">

    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>

    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>

  </div>

  </div>

</div>

Would appreciate any assistance with this issue

csstwitter-bootstraplazy-loadingsrcsetresponsive

Answer №1

After some experimentation, I have successfully resolved the issue of my webpage reflowing by incorporating a wrapper around the image and adjusting the padding-bottom to match the image ratio. In my specific case, where the image was 9x6, I utilized the following equation:

6 / 9 = 0.6666667 * 100 = 66.666667

Through trial and error, I settled on 66.5% for full-width images and 33.25% for images at 50% width. This adjustment was necessary as certain browser sizes incorrectly interpreted the image height by 1px too tall.

Visit My CodePen Example Here

  
<div class="lazy-wrapper ratio-padding">
    <img data-src="http://placehold.it/160x107" data-srcset="..." sizes="100vw" class="lazyload" alt="" />
</div>

<div class="lazy-wrapper-2 ratio-padding-half">
    <img data-src="http://placehold.it/160x107" data-srcset="..." sizes="(min-width: 768px) 50vw, 100vw" class="lazyload" alt="" />
</div>

CSS Styling:

.ratio-padding {
    padding-bottom: 66.5%; 
    height: 0;
}

.ratio-padding-half {
    padding-bottom: 33.25%; 
    height: 0;
}

.lazy-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: all 0.3s ease-in-out;    
}

.lazy-wrapper-2 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
    .lazy-wrapper-2 {
    width: 50%;
    }
}

.lazy-wrapper img, .lazy-wrapper-2 img {
    max-width: 100%;
    width: 100%
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes a CSS Variable to appear crossed out in the Chrome Debugger?

Currently facing a challenge with debugging an issue where certain CSS Variables are being overridden by an unknown source. It's puzzling because I cannot identify what is causing the override. When it comes to standard CSS properties (such as font-fa ...

cssgoogle-chrome-devtools

Exploring Media Queries Using Chrome Dev Tools

After an extensive search, it seems that the issue may lie in the fact that what I am seeking does not actually exist. When updating websites, I find myself constantly tracking down media queries. Is there a method to display all media queries for a speci ...

htmlcssgoogle-chromegoogle-chrome-devtools

Can you tell me which specific font Adobe Edge Code (Brackets) uses in its code editor?

Can someone please help me? I'm trying to identify the syntax highlighter being used in this code. Is it Prettify or something else? ...

javascriptcsstypographyadobe-edgeadobe-brackets

Regular expressions used to efficiently parse CSS selectors

I am looking to enhance the scope of my selectors. One effective method, in my opinion, is to target a CSS selector and return a combination of mySelector and oldSelector For instance, if I have .old { background: black; }, I would modify it to .mySelecto ...

cssregex

Tips for centering Font Awesome icons in your design:

I'm struggling to align the font awesome icons with a lower text section in the center. Here is the HTML code snippet: .education-title { font-family: Alef, Arial, Helvetica, sans-serif; text-align: center; font-size: 1.5em; } .edu-co ...

htmlcssfont-awesome

Do not insert a MUI divider after the final item in the menu

Is there a way to remove the divider after the last category when using MUI components and adding a divider after each category? https://i.sstatic.net/Gx0Zb.png This is my code with the divider right at the bottom before the closing tag. export const ...

cssreactjsmaterial-ui

Subclass Pseudoclass in JavaFX is a powerful feature that

I wanted to create two different styles of buttons in one css file. To achieve this, I added a class to the second button using: close.getStyleClass().add("close-button"); Now, I can reference this button in the css by: .button.close-button However, I ...

cssjavafx

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

javacssspringprimefaces

Dynamic Hero Banner

As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn ...

htmlcssbootstrap-4media-queries

Creating a dynamic CSS animation with multiple spans for typing effect

I have made some progress with this project. Here is the link to what I have so far: http://codepen.io/tacrossman/pen/GJglH However, my goal is to have the cursor blinking animation running after each new word (span) is written out. When I attempt to ad ...

htmlcssanimation

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Abnormal scrolling issues observed on handheld devices like mobile phones and tablets

I recently added a parallax effect to the hero section of my website, and while it works perfectly on desktop, I encountered some scrolling issues when viewing it on mobile or tablet devices. Sometimes the scrolling behaves as intended, and other times it ...

javascripthtmljquerycss

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

c#javascriptcss

Ensure that the tab's content fills up the entire space provided and prevent the need for a vertical scrollbar to appear

Is there a way to make the tab content take up 100% of the available space without causing a vertical scroll due to the height of the tab itself? I am currently using ng-bootstrap and need assistance with this specific issue. You can review my code in the ...

css

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

javascriptjqueryhtmlcss

Best practices for aligning the widths of input-group-addon elements

Hey there, I'm working with an HTML file that has 3 input options. Here's a snippet: <script type="text/ng-template" id="dashboard_assigngroup_popup.html"> <div class="modal-header modal-header2"> <h3 class="modal-tit ...

javascriptcssangularjshtml

Adaptive text sizing within Microsoft Outlook

I am facing a challenge in making the font size of my email signature responsive. Although VW seems to be the solution, it doesn't seem to work in Outlook. I have attempted using CSS, but it appears that inline CSS might be necessary. However, I am un ...

htmlcssoutlookinline

Applying a margin to a CSS div at the bottom may cause it to not

I'm struggling to achieve the desired outcome with my layout: https://i.stack.imgur.com/CvLFl.png I have successfully replicated the image, but only when my div is not floating on the page (without margin applied and without using position: absolute ...

css

Enhancing the responsiveness of images compared to regular images by resizing and locking them in place

I'm struggling with adjusting the responsiveness of my icons around the main wheel to changes in page size. Currently, they are not staying put relative to the middle wheel when the page size increases or decreases. I also need the wheel and icons to ...

htmlcssresponsive-designbootstrap-4