I'm stuck with a CSS issue and hoping someone knowledgeable can help.

I have a nice responsive template that I'm trying to customize with this one tweak, but I can't figure it out. My site is a photoblog and I use a single, centered column for my posts (shots with stories).

The column is about 750px wide, which is great width for reading a line of text, but I want the option of a bigger photo that goes well beyond 750. Is there a way to apply a class to an image where it would go beyond the centered column, but still stay centered on the page, and also stay within the browser window?

For example, a max-width of 1400px (uploaded as a 1400px image), centered, and also responsive to the browser window so that it is a max of 95% of the screen.

I shoot large images and want the option to display them bigger than my 750px column, which works very well for everything else. I just need to be able to have images that break those bounds and still play well with the device. As the @media scales down, the 95% width would take over to always have my image play well for the viewer.

I made a cartoon to illustrate: Current template and goal of large image option

Thanks in advance for your help! ~e

closed as off-topic by Jacob Peattie, Tom J Nowell Jul 30 '18 at 4:13

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.