westonu91753563

New Participant

Answered

Setting a Max Height for Added Images

Forum|Forum|7 years ago
November 27, 2018
2 replies
1723 views

0down vote favorite

I am making an artist website and want to add a few photos of my work. I want the images to be responsive to the page, which I can do by making max-width 100%, however the image grows too long in height and requires the viewer to scroll to see the entire image. See attached images, one where the image fits on the screen and one where extending the page has made it not fit.

How do I set the image to not grow beyond the height of the current window? I have tried working with max-height, to no avail. Any advice is greatly appreciated!

Best, Weston Uram

This topic has been closed for replies.

Correct answer Nancy OShea

Use a responsive Lightbox viewer. The image should scale to available viewport and maintain proper aspect ratio.

Nancy OSheaCorrect answer

Community Expert

Use a responsive Lightbox viewer. The image should scale to available viewport and maintain proper aspect ratio.

Nancy O'Shea— Product User, Community Expert & Moderator

Community Expert

did you tried max-height:100vh

westonu91753563Author

New Participant

hmm, max-heigh:100vh fixes the height, but makes the image disproportioned. How can I make sure the scale remains the same?

Community Expert

try

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>image max</title>

<style>

body {

height:100vh;

}

img {

display:block;

margin:0 auto;

height: 100%;

width: auto;

max-width: 100%;

max-height: 100vh;

}

</style>

</head>

<body>

<img src="your-image.png">

</body>

</html>