Within my project, I have implemented a CSS technique where all images within a container are set with the attributes max-width: 100%; and height: auto;. This is done to ensure that images scale down appropriately when the viewport and container size decrease. However, an issue arises where the browser struggles to render the page correctly without loading the images first to ascertain their dimensions.
Typically, when using the
<img width=100 height=100 />- Is there a method to utilize the max-with: 100%/height auto technique without disrupting the standard behavior of displaying a placeholder while loading?
- If not, what would be the correct way to define a class for certain images that should remain at their original size and load normally, with a correctly sized placeholder displayed during the loading process? Attempts such as setting
height: initialandheight: inherithave been made, but they do not prevent the image from defaulting to 0x0px until fully loaded.
To demonstrate this issue, I have created a fiddle showcasing the problem (although it may not be visible due to caching). Therefore, I have replicated the code from https://jsfiddle.net/yrx52avq/4/ on , where delays and no-caching options have been added. Upon reloading the page, observe how the red boxes 'pop out' during the loading process, while the green ones do not. https://i.sstatic.net/V9QJB.png