I want to display a photo underneath some text. I want the photo to be centered horizontally, and to shrink as necessary to fit the remaining rectangular space between the end of the text and the bottom edge of the browser window. It should not enlarge beyond 100% its original size if there is more than enough room. There should never be a need for scroll bars to appear.
Here’s a demo. Things to note:
- The html, as styled, is always equal to the space inside the window. This is the space I don’t want to extend beyond.
- I set body margin to zero, so that it would superimpose the html space (otherwise, the default margin would shift the body down and to the right, extending outside the html area and activating scroll bars).
- I define a div (.outer-div) inside and superimposed over the body. This gives me a container that is guaranteed not to have any user agent styling. I reinstate the margin for the left and right side, causing it to narrow symmetrically within the body. I define it with display: flex and flex-flow: column because someone said to 🙂
- I create a flex item, .inner-fixed-div, to contain the text at the top of the page.
- I create another flex item, .inner-remaining-div, to occupy the unused rectangular space below the text. It is the container that the image must fit within. It’s set to flex-grow: 1, as per the flex solution I was trying to apply.
- I create a container for the picture, .picture-div. The display: inline-block causes it to respond to its container’s text-align: center.
- Finally, the img is styled with width: 100% and height: auto, which I understood would scale the image to fit its container, retaining aspect ratio.
Most of the duplicate questions suggested by the Wizard had to do with excess white space at the bottom of a page. This answer relied on magic numbers; i.e. the pixel sizes of various components of the page. I don’t want a solution that needs to know the absolute size of anything – there must be a self-maintaining way to do this.
Note that the use of a 600×400 px image in the demo is arbitrary. The actual image, chosen by the CGI script that writes the html, will vary in size from smaller than the available space (in which case it should not be enlarged), to larger than the available space (in which case it should be shrunk to fit tightly in the available space).
/* The outlines are all "inside-outlines": their negative offset makes
their *outer* edges trace the container. This is done because
otherwise the outline of the outermost container, HTML, would not
be visible on the north and west sides of the window */
html {
height: 100%;
width: 100%;
/* Outline shows that "html" always exactly fits the window */
outline: 6px dashed black;
outline-offset: -6px;
}
body {
margin: 0;
/* prevent body from displacing to the southeast */
height: 100%;
/* body should perfectly superimpose the html */
width: 100%;
outline: 4px dashed red;
outline-offset: -4px;
}
.outer-div {
display: flex;
flex-flow: column;
height: 100%;
/* Now create left/right margins */
margin: 0 0.5em;
}
.inner-fixed-div {
outline: 4px dotted blue;
outline-offset: -2px;
}
.inner-remaining-div {
text-align: center;
flex-grow: 1;
}
.picture-div {
outline: 4px dashed fuchsia;
outline-offset: -4px;
/* Enable to respond to parent's text-align */
display: inline-block;
}
.picture-div-img {
outline: 4px dashed purple;
outline-offset: -4px;
width: 100%;
height: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="outer-div">
<div class="inner-fixed-div">
<h1>Static portion</h1>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Per dignissim arcu imperdiet accumsan suscipit. Nisl donec ultrices dui fames dapibus neque sollicitudin vitae. Ut parturient elementum cursus sodales sem sed praesent parturient. Rutrum ultricies erat
finibus taciti ante feugiat dictumst dictum. Imperdiet lobortis penatibus non imperdiet ridiculus ac gravida. Platea lobortis tempor tempus lacus dui felis.
</p>
<h2>Remaining space will contain a photo, scaled down to fit if necessary
</h2>
<p>
The remaining space should be precisely bounded by the HTML container (the thick dashed black outline). The photo should be centered, should scale dynamically while maintaining aspect as the window dimensions are changed. <i>There should be no need for
scrollbars.</i>
</p>
</div>
<div class="inner-remaining-div">
<div class="picture-div">
<img src="https://placehold.co/600x400?text=600+x+400npx" class="picture-div-img">
</div>
</div>
</div>
</body>
</html>3
After some trials and discussions, I’m changing the content of this answer to the bestter solution I found about this…There’s a long time that I don’t delve in CSS..
.inner-remaining-divmust haveoverflow: hiddento clip the extra content and hide the scrollbars..picture-div-imgmust haveobject-fit: scale-down.
The snipped below is pretty much working as you intend…
It’s unfortunate that the scale-down keyword is not a valid value for background-size, so I went back to solve it with the img tag.
/* The outlines are all "inside-outlines": their negative offset makes
their *outer* edges trace the container. This is done because
otherwise the outline of the outermost container, HTML, would not
be visible on the north and west sides of the window */
html {
height: 100%;
width: 100%;
/* Outline shows that "html" always exactly fits the window */
outline: 4px double black;
outline-offset: -4px;
}
body {
margin: 0;
/* prevent body from displacing to the southeast */
height: 100%;
/* body should perfectly superimpose the html */
width: 100%;
outline: 4px dashed;
outline-color: rgba( 255 0 0 / 1);
outline-offset: -4px;
}
.outer-div {
display: flex;
flex-flow: column;
height: 100%;
/* Now create left/right margins */
margin: 0 0.5em;
}
.inner-fixed-div {
outline: 4px dotted blue;
outline-offset: -2px;
}
.inner-remaining-div {
outline: 4px dotted yellow;
outline-offset: -4px;
/* text-align: center; */
flex-grow: 1;
/* hints the contents to not overflow */
overflow: hidden;
}
.picture-div {
outline: 4px dashed lime;
outline-offset: -4px;
/* force the div to fill the available space */
width: 100%;
height: 100%;
}
.picture-div-img {
outline: 4px dotted purple;
outline-offset: -4px;
/* force the image to stay true to its proportions */
width: 100%;
height: 100%;
/* and force it to behave like needed */
object-fit: scale-down;
object-position: top;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="outer-div">
<div class="inner-fixed-div">
<h1>Static portion</h1>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Per dignissim arcu imperdiet accumsan suscipit. Nisl donec ultrices dui fames dapibus neque sollicitudin vitae. Ut parturient elementum cursus sodales sem sed praesent parturient. Rutrum ultricies erat
finibus taciti ante feugiat dictumst dictum. Imperdiet lobortis penatibus non imperdiet ridiculus ac gravida. Platea lobortis tempor tempus lacus dui felis.
</p>
<h2>Remaining space will contain a photo, scaled down to fit if necessary
</h2>
<p>
The remaining space should be precisely bounded by the HTML container (the thick dashed black outline). The photo should be centered, should scale dynamically while maintaining aspect as the window dimensions are changed. <i>There should be no need for
scrollbars.</i>
</p>
</div>
<div class="inner-remaining-div">
<div class="picture-div">
<img class="picture-div-img" src="https://placehold.co/600x400?text=600+x+400npx">
</div>
</div>
</div>
</body>
</html>11