WordPress reducing width of full-width images

When you added the image to the page / post did you choose the size under attachment display settings? One of the options there is to select ‘Actual Size’.

‘Actual Size’ isn’t an option but I did select ‘Full Size’ (800 x 417px in the example above).

Hmm ok. The two things I would look at next would be:

1) The image itself seems to be only 600px wide anyway. If it used to be 800px wide then is something cropping the image or was it edited to crop it permanently?

3) The img css sets it to ‘max-width’ which I think means ‘up to’ as opposed to ‘actually’ 800px wide. So a 600px wide image can be 600px but it can’t be 810px. Get it?

2) The entry content div is set to 700px max width with 150px margin either side. Try reducing the margin and increasing the max-width to allow the content more space. I can’t even see where that 150 is coming in but maybe if you declare the margin with something like this:

‘.entry-content {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word !important;
width: 800px;
margin: 40px;’

And:

`img.size-full, img.size-large, img.wp-post-image {
height: auto;
width: 100%; (instead of max-width)
}’

Maybe play with that code to get it working (might no be exact).

Hmm ok. The two things I would look at next would be:

1) The image itself seems to be only 600px wide anyway. If it used to be 800px wide then is something cropping the image or was it edited to crop it permanently?

3) The img css sets it to ‘max-width’ which I think means ‘up to’ as opposed to ‘actually’ 800px wide. So a 600px wide image can be 600px but it can’t be 810px. Get it?

2) The entry content div is set to 700px max width with 150px margin either side. Try reducing the margin and increasing the max-width to allow the content more space. I can’t even see where that 150 is coming in but maybe if you declare the margin with something like this:

.entry-content {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word !important;
width: 800px;
margin: 40px;

And: line 699

img.size-full, img.size-large, img.wp-post-image {
height: auto;
width: 100%; (instead of max-width)
}

Maybe play with that code to get it working (might not be exact as I’ve just had a quick look). I used my browsers code inspector to see what was going on. Right click , inspect element (in Chrome).

Apologies for double post – I assumed I’d made an error when I couldn’t see my reply so I redid it! ??

Hey Monalicia,

As far as I can see it isn’t a CSS issue. WordPress appears to be setting the width of the image within the HTML itself.

On the backend the HTML is this:

<img class=”aligncenter size-full wp-image-74″ src=”https://www.tomewer.com/wp-content/uploads/2014/09/stonebridge-golf-club.jpg&#8221; alt=”Stonebridge Golf Club” width=”750″ height=”229″ />

But on the front end the HTML is this:

<img class=”aligncenter size-full wp-image-74″ src=”https://i2.wp.com/www.tomewer.com/wp-content/uploads/2014/09/stonebridge-golf-club.jpg?zoom=2&resize=604%2C184&#8243; alt=”Stonebridge Golf Club” width=”604″ height=”184″ src-orig=”https://i2.wp.com/www.tomewer.com/wp-content/uploads/2014/09/stonebridge-golf-club.jpg?resize=604%2C184&#8243; scale=”2″>

Hi Tom

Your page is 1000px wide. Your .entry-content width is 700px plus 150px each side padding (=1000px total). How can an image that is 800px wide fit into 700px when you’ve got it set to max-width: 100% in the CSS?

I would still sort that first.

Hi Monalicia,

.entry-content is 700px wide has 150px margin either side.

I don’t intend for an 800px image to fit into 700px, I simply expect it to default to 100% width of the parent container (i.e. 700px). That isn’t happening. Instead, it appears that WordPress is imposing a 604px width for reasons I can’t figure out.

Hope that makes sense!

OK yes sorry I thought you wanted the image to be 800px wide so thought we could clear that up first.

Moving onto the second issue: why the image gets resized…

How are you uploading the images?
Do you have any kind of image resizing plugin installed?
The giveaway might be that URL with i2.wp.com
That seems to be related to something called Photon. I saw this on the Photon site:

“How does Photon determine which dimensions to serve?
Photon looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller).”

Could this be installed perhaps?

Hi Tom, I see your site is now dedicated to selling your blogging service. Perhaps this was resolved then?

To be honest, I can’t remember! I may have resolved the issue, or perhaps re-designed the site…I’ve slept many times since then ??

Either way, I’ve marked the thread as resolved. Thank you for your help!