Responsive Images Height on Page

HTML & CSS
1

Okay, I mostly have this worked out. The images scale down nicely when the screen size starts narrowing down, but only the width seems to want to cooperate. I haven’t yet been able to get the height of the slideshow’s containing DIV to properly scale down:

Is there a way to get the height to cooperate too?

2

I had to look around for some images, but the ones I found seemed to scale OK. They will do that by default, so the only thing that would prevent it is setting a fixed height on an image.

3

Thanks. I should have clarified that the issue is that the height of the containing DIV is the unresponsive element, so that the narrower the screen gets the more white space there is underneath.

4

That is because you have given the containing divs fixed heights.

5

I’m still not clear what we’re referring to, but yes, as ron says, a fixed height will do that.

As an aside, I would rethink the slow fadein of content. People often only wait a few seconds before deciding to move on, and it takes that long for your content to appear. It’s kind of annoying, so I wouldn’t use it. I was itching just to close the page, to be honest.

6

Not only is it slow, it doesn’t really doesn’t clue to the visitor about what to do next. Click something? Where and what? Hard to see on a desktop.

7

The images don’t seem to have any dimensions listed anywhere. Usually one would include the dimensions in the img width and height attributes along with the alt attribute. Do all of the images in each section have the same dimensions?

8

This is one way to do it.

You should not need any fixed widths or heights on those containers; max-width only.
#singleImages {height:699px; width:1048px;} /* delete these */

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/responsive-images-height-on-page/191169
Responsive Images Height on Page
MauiMan2
May 27, 4:47 PM
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*, *::before, *::after {
    box-sizing:inherit;
}

body {
    margin:20px;
}

#digitalComposites,
#singleImages,
#doubleExposures {
    position:relative;
    display:none;
    margin:0 auto;
}
#digitalComposites,
#singleImages {
    max-width:979px;
    padding-top:133.33%;
}
#doubleExposures {
    max-width:1305px;
    padding-top:75.02%;
}
img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
}

/* set whichever group you wish to see to display:block; */
#doubleExposures {
    display:block;
}
    </style>
</head>
<body>

<main>
    <div id="digitalComposites">
        <img src="http://placehold.it/979x1333" alt="slide1" width="979" height="1333">
    </div>
    <div id="doubleExposures">
        <img src="http://placehold.it/1305x979" alt="slide1" width="1305" height="979">
    </div>
    <div id="singleImages">
        <img src="http://placehold.it/979x1333" alt="slide1" width="979" height="1333">
    </div>
</main>

</body>
</html>

If you cannot adapt this to your code, let us know.

10

I am dealing with a client who is hell-bent on me emulating someone else’s old Flash-based photography site. This client does not understand a lot of different things and I am navigating through the misunderstandings the best I can. When his name fades in first he thinks that is the first “page” of his site. When any other element then fades in he thinks that means the viewer has gone to a new page. He has sent me images in many different dimensions and insists that he has sent everything at exactly the same size. He thinks that if he scans in an image from a print that is 18 inches that it should show up at exactly 18 inches on anyone’s monitor. One reason I am constraining the containing DIVs is because he keeps changing what size he thinks the images should be displayed at, so I set it in the CSS rather than making constant PhotoShop changes at his every whim. When I adjust the size of one slideshow at his whim and make it smaller and he then goes to another slideshow that I haven’t touched he insists that I made that next one bigger, but doesn’t realize it is only “bigger” now in proportion to the newly “ensmallened” one. He was okay with me leaving out his muse site’s outmoded “Click Here to Enter” feature only to then later wonder why I hadn’t put it in; or he wanted me to take the verbage out while retaining the functionality… or something. He sends some images to me in the same width but in different heights and then wonders why I made them display at the same width but different heights in the browser. I could go on. I trust you two have dealt with similar situations before. Thanks for the help.

11

Close but not exactly. I couldn’t get through to him that I needed all the images in each slideshow to have the exact same pixel dimensions. It was partly because of this that I forced exact dimensions through CSS. Near the beginning of the project I did some PhotoShop work on some of the images to get them to be the exact same dimensions only to have one of of his whims later on completely undo what I had done.

12

Give this a try and see if it will work for you.

Ideally the images in each section must be the same size. With this test page, you can change a dimension see what happens if they are not. I’ve used opacity to make discrepancies in aspect ratio more apparent. Be aware that the “solid” component is the normally white “projection screen”/“viewing area”. That is the object that creates the height. The images are pos:abs and have no substance. That is why you must fit the images to the “screen”.

EDIT: I have deleted the code. Needs more testing.

EDIT: False alarm. It’s good.

responsive-images-MauiMan2.html (2.6 KB)

1 Like
13

Thank you. Will check this soon.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.