Image problems when centered on pages

[David]

Greetings,

Having a real strange problem with placing images on a page centered. They resize to taking up the entire screen. If I do left or right justified everything fine. Only happens when I center an image on a page.

It looks ok when in design mode as centered. But when displaying the actual page then it does it’s weird thing.

I turned off every plugin except buddypress and still have the same problem.

Here is how to duplicate:

1… upload a small image to your media library, say around 150px x 150px.
2… insert the image into a new page.
3… center the image on the page.

After saving and displaying the page, you should see what I see, which is a really weird resized huge image and notice that the left and right justified versions work fine. Just the centered image has a problem.

— Dave

[David]

More testing…

I should have mentioned that the problem of the image being resized to huge only happens on small screens. (Phone or window sized to smallest width)

However, on my desktop machine with a large window, the centering does not work at all. It simply stays left justified.

Switching themes to others such as 2015, 2014, all work fine for centered images on pages but problem returns when re-activating the Boss theme.

Have now tried multiple browsers (chrome, Safari) and still no change. Tried on my wifes laptop and same result.

ANY Ideas?

[David]

I have setup a complete new install of WP, Buddypress & Boss Theme… No plugins, just a blank new install so you can see what is happening…

The same image 255px square is used for left and right justify, then the centered image. As you will see, the centered image gets resized to the full width of the screen. (No matter what size you make the window)

Here is the fresh install with example:

http://positivepowered.com

[David]

@tjchester or @michael

Can we get a fix for this soon?

[Alyssa]

@dnosker sorry for the delay, it took some time to get around to setting this up between my primary job. The problem is with some CSS in wordpress.css. Try adding this to custom.css:

img.aligncenter {
margin: 0 auto;
max-width: initial;
min-width: initial;
}

[David]

That fixed it… Thanks so much! 🙂

[Alyssa]

You are welcome

[Michael Eisenwasser]

@dnosker @tjchester

Official patch is coming in next release. We are keeping the style, but restricting it to images displayed in “full-size”. So if you have a smaller image, set it as thumbnail or medium or anything but full size, and it will not display at 100% width.

We’ve also restricted this to JUST blog posts, removed from pages. It is part of the layout for blog posts..