Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: www.amitmerchant.com
Prevent Image Layout Shift Using CSSCategory: PHP, javascript
When you are working with images on your website, the issue of the https://web.dev/optimize-cls/ that comes with it is real and pretty annoying at times. As you can tell, when the images are not handled correctly, the content that lies beneath the image will appear first and then shifts below as the image starts loading.
Next, we need to set the position of this image-container as relative and the position of the image as absolute.
.image-container { position: relative; img { width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }}
Instead, it will show the nice background color of your choice in place of the image when the image hasn’t started loading yet!
Next, we need to set the position of this image-container as relative and the position of the image as absolute.
.image-container { position: relative; img { width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }}
Instead, it will show the nice background color of your choice in place of the image when the image hasn’t started loading yet!
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers