Vertical sizing of portrait (vertical) images - how to keep within browser

[egamiimage]

I need help to prevent portrait oriented images from expanding outside of the browser view.

I have series of horizontal and vertical photographs all with the same 2/3 or 3/2 aspect ratio (pixel size - 1465x1025 or 1025x1465. These are on on a sequence of individual pages with individual text captions, etc.

The horizontals expand into the space allocated for them in the browser and respond properly and responsively to changes in the browser size. The verticals (portrait) fill the entire browser with the image extending out of the browser space. They are responsive but the whole image can only be seen at the mobile phone size.

How do I limit the sizing of vertical images so they remain visible at all browser sizes?

[hendon52]

The only effective way to achieve this (easily) is to resize your image to a height of about 700px. (or whatever the smallest size you expect your site visitor’s screens to be). This will ensure that it displays on most average screen sizes without cutting off. Of course, those who may decide to have their browser windows set at smaller viewport will still have to scroll to see the whole image, but this is something they would expect anyway, as almost all websites work this way. As an alternative to resizing your images, you could also create a custom class and apply it to the images. This will allow to set min and max sizes for the image.

[egamiimage]

thanks Hendon52