Images not full width

HTML & CSS
1

Hi. On this page: https://www.sassco.co.uk/6-a-side/carpet-centres-take-the-august-tournament/ the images are not full width. I’ve tried to make sure all is correct WP side, but they still don’t go full-width.

They used to, but now don’t seem to.

[caption id="attachment_2329" align="aligncenter" width="1000"]<img class="wp-image-2329 size-full" src="https://www.sassco.co.uk/wp-content/uploads/2020/07/Sassco.co_.uk-v-Grangetown-FC.jpg" alt="Grangetown FC v Sassco.co.uk" width="1000" height="500" /> Grangetown FC v Sassco.co.uk[/caption]

2

Hi davindersangha, welcome to the forums!

I checked the images using the browser’s “Inspect” tool and found that the html img tag has its intrinsic width and height given, just as they should.

 alt="Grangetown FC v Sassco.co.uk" width="640" height="320"

But then in the CSS the images have only max-width set and so the img attribute of 640x320 is what is used:

img {
    height: auto;
    max-width: 100%;

Try this:

img {
    height: auto;
    width: 100%; /* add this to adapt to its container */
    max-width: 100%;
1 Like
3

Cheers. Fixed it. Realised it was Jetpack -

The setting which loads pages faster by allowing Jetpack to optimise images and serve images and static files (like CSS and JavaScript) from their global network of servers.

Disabled Enable site accelerator
Disabled Speed up image load times
Disabled Speed up static file load times

1 Like
4

Thanks for useful feedback. :+1:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.