Format sizes of photos inside posts responsive to screen size

[maskenmax]

Hi!

While landscape orientation pictures are perfectly fitted to be 100% viewable with no scrolling, the portrait oriented pictures are often too large and require scrolling to see the whole image.

I see you have answered this previously, however my question is not for the gris layout (I use The Grid now, https://m9x.se), it is for how the photos behave inside each post. Now I have to scroll to see the entire portrait photo, and I can never see the entire photo at the same time. Landscape photos works perfect, but not portrait.

Is there a CSS codeing to be done to make sure that ALL photos can be viewed fitted to the screen in a post?

/Max

[lely]

Hi Max,

Can you give us a specific screen size so we can help you better. Photos inside post are using image element. Image height and width adjust proportionately. If you don’t want to scroll to see the entire portrait photo, we can use media query to set max-height to it. But that means its width will shrink too. Unlike on the GRID where it is added as background and adjustment is possible when you set background type to cover.

[maskenmax]

I mean, when you have the post in the browser window I would like to see the entire photo when in portrait, just as when it is in landscape. Photos in landscape orientation are always showing the entire photo, but when photos are in portrait orientation, only a part of the photo is showing. I used another theme before (ProPhoto5) and in that theme all pixels of a photo in a post was shown in the browser window.Same as when seen on the phone, then all of the photo is always shown. But when viewing on computer portrait photos needs to be scrolled to view.
For example, I would like to maximize the hight to 700 px and the width to 1200 px. But I cannot find any way to do this.

Example of problem: https://m9x.se/2019/11/02/natural-monsters/

[ruenel]

Hello @maskenmax,

To get your issue resolved, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post p img.size-full {
    width: auto !important;
    max-height: 700px;
    margin-left: auto;
    margin-right: auto;
}

We would love to know if this has worked for you. Thank you.

[maskenmax]

Thank you, SOOOOO much! I have been trying to do that for a very long time. It worked just as I wanted to! Thank you!

[christian]

You’re welcome, @maskenmax. Glad we’re able to help.

[maskenmax]

Hi again,

Is it, to your knowledge, possible to set the height to correspond with the hight that the browser window is, so that if I make the window larger, the height of the photo also grows to accordingly (just as the landscape photos does by default?

/Max

[rad]

Hi Max,

You mean make the image the same size of browser window? That could be possible but the image will be distorted since not all images has the same aspect ratio. For that, you will need to change this

width: auto !important;
    max-height: 700px;

To this

width: auto !important;
    max-height: 100vh;

The 100vh means 100% view height.

Thanks!