我想在某些文字下方显示照片。我希望照片水平居中，并根据需要缩小以适应文本末尾和浏览器窗口底部边缘之间剩余的矩形空间。如果有足够的空间，它不应放大到超过原始大小的 100%。 永远不需要出现滚动条。
这是一个演示。注意事项：
向导建议的大多数重复问题都与页面底部多余的空白有关。 这个答案依赖于神奇的数字；即页面各个组件的像素大小。我不想要一个需要知道任何东西的绝对大小的解决方案 - 必须有一种自我维护的方法来做到这一点。
抱歉，这没有使用“代码片段”的东西。无论出于何种原因，突然这个编辑器没有向我显示该选项（也许是因为我正在使用询问向导？）
/* 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 {
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+400\npx" class="picture-div-img">
</div>
</div>
</div>
</body>
</html>我不知道我的回答是否能完美解决您的问题，但我推荐这个...
使用图像作为
divimg然后你可以使用
inner-remaining-divmax-*.inner-remaining-div
{
width: 100%;
height: auto;
max-height: 400px;
background-image: 'https://placehold.co/600x400?text=600+x+400\npx';
background-position: bottom;
}
将背景图像与
bottommax-height将背景图像与
topmax-height我还建议您阅读以下链接：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
那里有一些很好的例子和一个游乐场......
您也可以使用
imgoverflow:hiddendivimg