Wordpress reducing size of image on page

I have just uploaded an image to the media folder, and its width is 1000px, and I set it to be added to the media folder as 1000px wide.

Then i went to a page, clicked the 'Add Media’button, chose that image and when it appears on the page it comes through smaller, to be exact 700px; although even the width setting in the image is set to 1000px.

Here is the link to the site - `https://isimrs.com/motorsports-team/

When you upload an image to the WordPress media library it usually is saved in 3 different sizes - full size, medium size and thumbnail. So when you want to add an image to a page you need to make sure you have chosen the correct settings from the right hand side of the screen. These include alignment, size, link, etc.

Ye I thought it was that, so have gone back to the image and I dont get that option to choose the size, I cant see it an any of the images

Did you actually choose ‘add media’ on your post edit screen, then select the image from the media library? That should take you to where you can choose which version of the image you want.

ah yes sorry, you do it there dont you.

So ye I went to the page clicked Add Media selected the image and made sure I choose the large size and the code that appears on the page reflects my correct choice

<img src="https://isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg" alt="" width="1100" height="400" class="alignnone size-full wp-image-1261" />

But then you go to the site, and the image is set too 760 which is the middle size.



Check the CSS and see if there is anything there that is restricting the size of the image.

Nope, checked the main stylesheet style.css and nothing there, its not a plugin either so cant be anything there.

The only thing that I noticed that might be involved is max-width: 100% i.e. If bootstrap has a container that is 700 px

I dont know this is strangte. I just copied the code below from debugger that relates to the image, as wondered someone might see something there. The bit at the bottom is related to the size of the image on the page being 760px

<img data-attachment-id="1261" data-permalink="https://isimrs.com/motorsports-team/isimrs-car5-2/" data-orig-file="https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?fit=1100%2C400&amp;ssl=1" data-orig-size="1100,400" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="isimRS-Car5" data-image-description="" data-medium-file="https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?fit=300%2C109&amp;ssl=1" data-large-file="https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?fit=760%2C276&amp;ssl=1" src="https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?resize=760%2C276&amp;ssl=1" alt="" class="alignnone size-full wp-image-1261" srcset="https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?w=1100&amp;ssl=1 1100w, https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?resize=300%2C109&amp;ssl=1 300w, https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?resize=768%2C279&amp;ssl=1 768w, https://i1.wp.com/isimrs.com/wp-content/uploads/2017/02/isimRS-Car5-1.jpg?resize=1024%2C372&amp;ssl=1 1024w" sizes="(max-width: 760px) 100vw, 760px" width="760" height="276">

Yes, the “fit=1100.400” is the likely culprit.
I think you’ll need to find a way to give the area it’s being fit into more room if you want the image to display larger.

And there was me thinking wordpress was much easier, ye just click add media and choose an image. Only been trying to work this out for nearly 10 hours!

Thanks for looking Mittineague, what is that then, and how I wonder can get around that.

Seems really silly to not allow an image to be the size it should be.

I’m not very familiar with bootstrap, it feels like more of a “make content fit the design” approach than a “design for the content” approach that I prefer.

Anyway, AFAIK the container has a “col-12” and the descendants down to the image look to all have max-width 100% so it seems that the image should be taking up close to ful width if not its full size.

Can you get the <div>s out of the <ul>s ? I have a strong feeling that’s involved.


Its a stupid way around it, but what I might have to do is take the header pic away from inside the page itself, and instead hard code the images into the template, so that it shows this image if this page is this sort of thing.

Thinking about it now, its really stupid, as the client isnt going to know what to do, but cant see a way around it thats better short term.

Cheers though, I’ll keep looking

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