Archived topic
Webp Images not rendering 100% width.
3 replies · Started by David on August 26, 2020
Hi,
I am working on optimising my website.
I have installed the Imagify Plugin to automatically generate a webp version of any image I upload.
I am selecting an option to replace the IMG with PICTURE tags automatically, and some of the images are no longer displaying 100% full width.
I appreciate that perhaps some CSS might be able to resolve the issue? I'm wondering if you might be able to assist in any way with this?
The images most obviously impacted are at the base of the homepage; (1) An on this day in history image and (2) A quote of the day image. Before making the change to point to make use of the PICTURE tag the images were rendering the full width(which can be seen outlined in a red border.
Any help will be gratefully appreciated.
Best Regards
David
Hi there,
those Picture element img tags are being output with a width and max-width attributes that are set to 300px.
We can override this with some like so:
picture img {
width: 100%;
}However, resizing an image using CSS will break the src-set properties. So it will only ever display the rescaled smaller image - not the larger image sizes available.
I am not sure whether the Imagify plugin or the method you're adding those images allows you to select a more appropriate size.
Hi David, thanks for your speedy reply.
As you suspected; that worked for some images, and for others it worked when I didn't necessarily want it to. The homepage images looked great, but I have removed the CSS for now.
Thank you- you've given me something to work with, and I may have to revisit my overall solution here, including the plugin I'm using.
Thanks so much. Have a great day.
Best Regards
David
You're welcome
