Highlighted

Setting a Max Height for Added Images

New Here ,
Nov 26, 2018

Copy link to clipboard

Copied

0down votefavorite

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.

Screen Shot 2018-11-26 at 10.05.07 PM.pngScreen Shot 2018-11-26 at 10.05.21 PM-min-min-min.png

How do I set the image to not grow beyond the height of the current window? I have tried working wit...

Best, Weston Uram

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

307

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Setting a Max Height for Added Images

New Here ,
Nov 26, 2018

Copy link to clipboard

Copied

0down votefavorite

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.

Screen Shot 2018-11-26 at 10.05.07 PM.pngScreen Shot 2018-11-26 at 10.05.21 PM-min-min-min.png

How do I set the image to not grow beyond the height of the current window? I have tried working wit...

Best, Weston Uram

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

308

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 26, 2018 0
Adobe Community Professional ,
Nov 26, 2018

Copy link to clipboard

Copied

did you tried max-height:100vh

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
New Here ,
Nov 26, 2018

Copy link to clipboard

Copied

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

Screen Shot 2018-11-26 at 10.51.09 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
Adobe Community Professional ,
Nov 26, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 1
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

In practice, this is probably the better approach if you want to support the fact that some versions of Dreamweaver, in some cases, will automatically insert a height and width attribute on the image tag:

    body {

        height:100vh;

    }

    img {

        height: auto: !important;

        width: auto !important;

        max-width: 100%;

        max-height: 100vh;

        vertical-align: bottom;

       }

Vertical align fixes image positioning inside a box without converting it to a block level element. If you want an image centered, then display block and auto margins should be used (as you did), making vertical-align bottom dispensable.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 1
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

now it is you that surprise me... the CSS tree is build after the DOM tree... so CSS override the HTML attribute... as you can see on this grab

11.27.2018-18.02.32

any how.. before uploading production files, I always run a npm script that clean up my entire files... and unnecessary attributes are always removed. width and height images file information are included in binary data and browser are able to read them if needed

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

any how.. before uploading production files, I always run a npm script that clean up my entire files... and unnecessary attributes are always removed. width and height images file information are included in binary data and browser are able to read them if needed

You're right, the !important directives are not required. Just an old habit of mine.

And that's really good that you run an npm script. But I'm not sure the original poster does .

But the height 100% you suggested is what I was really correcting.

Test Document

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

ALsp  a écrit

But the height 100% you suggested is what I was really correcting.

sorry for answering, you say that you replacing the height:100%; by a height:auto;

I miss your point...

if one use auto as value... the image size decrease if one zoom in not with 100%... please can you go further ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

ALsp   a écrit

But the height 100% you suggested is what I was really correcting.

sorry for answering, you say that you replacing the height:100%; by a height:auto;

I miss your point...

if one use auto as value... the image size decrease if one zoom in not with 100%... please can you go further ?

Apologies to the original poster. I was hoping to keep this a simple thread

Birnou, please view the test page for which I posted a link. To cover all layout contingencies, height needs to be set to auto or the combination of max-height and max-width will distort the image. Look carefully at the second image as you make your browser window narrow and watch how the images scale. If you are still not clear on this, please contact me offlist.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

I still don't see where the image ratio is distorded... don't forget that the parent container has a height defined.

I made the last bottom and the last right pixel of the image blue to see it when hovering the small, the normal and the bigger ratio... resizing the window doesn't affect anything.... nor the zoom when text only is selected... or not... sorry for being dummy

image max

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Mentor ,
Nov 27, 2018

Copy link to clipboard

Copied

This is where these threads go south. Now we're helping each other instead of the original poster and he or she has got to be really confused by now. Oh, well. Here you go...

birnou.png

I'm testing the rule you gave in all contingencies. Because someone is going to grab that code and run with it and their page is not going to be exactly what you had in mind, and the images will not scale properly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

why doesn't this happen on the interactive test I posted online?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

ok, sorry, I was long on that one, and I got what you mean... sorry...

I was only focusing on the fact that the OP was asking that the height should fit the height... which is probably wrong... but I was focusing on that...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
Adobe Community Professional ,
Nov 27, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 1