我有一个带有背景图像的容器。 我希望它：
- 始终填充容器的宽度
- 如果容器的高度变大，图像应粘在底部并增加顶部的间隙
- 如果容器的高度短于图像，则应在顶部保持 20px 的间隙，隐藏图像的底部(当它溢出时(
- 我不知道 CSS 中图像的高度/宽度
- 图像不应歪斜(应保持纵横比(
似乎我需要的是宽度contain，而不是高度，但是我不确定如何从顶部进行最小偏移。
在这里查看我的尝试：
background-size: 100% auto;
background-position: left 20px;
/* works when the height is shorter than the image
------------------
| |
| |
|................|
|. .|
|. .|
|. .|
|. .bg .|
|. .|
|. .|
|. .|
------------------
. . <- this is clipped off, that is fine.
................
*/
/*
does not work when the height is larger than the image
------------------
| |
| |
|................|
|. .|
|. .|
|. .|
|. .bg .|
|. .|
|. .|
|. .|
|. .|
|. .|
|................| <- I want this to be stuck to the bottom
| |
| |
------------------
*/
background-size: 100% auto;
background-position: left bottom;
/* works when the height is taller than the image
------------------
| |
| |
| |
|................|
|. .|
|. .|
|. .|
|. .bg .|
|. .|
|. .|
|. .|
|. .|
|................| <- stuck to the bottom, good!
------------------
*/
/*
does not work when the height is shorter than the image
................
. .
. .
. .
. .bg .
. . <- This is clipped off
------------------
|. .|
|. .|
|. .|
|................|
------------------
*/
background-size: cover;
background-position: left 20px;
/* works when the width is wider than the image (scales it up)
------------------
| |
| |
|................|
|. .|
|. .|
|. .|
|. .bg .|
|. .|
|. .|
|. .|
------------------
. . <- this is clipped off, that is fine.
................
*/
/*
does not work when the width is narrower than the image, and the height is taller
------------------
| |
| |
|................|.....
|. | . <- I do not want the width to overflow
|. | .
|. | .
|. .bg | .
|. | .
|. | .
|. | .
|. | .
|. | .
|................|.....
------------------
*/
我想要什么：
/* if the container is shorter than the image
------------------
| |
| |
|................| <- 20px offset from the top, full width of the container
|. .|
|. .|
|. .|
|. .bg .|
|. .|
|. .|
|. .|
------------------
. . <- this is clipped off, that is fine.
................
*/
/*
if the container is larger than the image
------------------
| |
| |
| |
| |
|................| <- full width of the container
|. .|
|. .|
|. .|
|. .bg .|
|. .|
|. .|
|. .|
|. .|
|. .|
|................| <- stuck to the bottom
------------------
*/
测试代码段：
/* width/heights are for illustrative purposes - actual width-heights are unknown */
div {
background-size: cover;
background-position: left 20px;
background-repeat: no-repeat;
margin-bottom: 50px;
border: 1px solid red;
width: 200px;
height: 300px;
}
.taller {
height: 500px;
}
.shorter {
height: 100px;
}
.wider {
width: 400px;
}
.narrower {
width: 200px;
}<!-- this image size and the container size are variable depending on author input - these are included as test cases, but I do not know the sizes -->
<strong>Same Size</strong>
<div style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Taller</strong>
<div class="taller" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Wider</strong>
<div class="wider" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Narrower</strong>
<div class="narrower" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Shorter</strong>
<div class="shorter" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Taller & Wider</strong>
<div class="taller wider" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Taller & Narrower</strong>
<div class="taller narrower" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Shorter & Wider</strong>
<div class="shorter wider" style="background-image: url('https://picsum.photos/200/300');"></div>
<strong>Shorter & Narrower</strong>
<div class="shorter narrower" style="background-image: url('https://picsum.photos/200/300');"></div>仅使用 CSS 是可能的，但您需要通过添加容器div 来稍微更改标记。我制作了一个可调整大小的容器，以简化此解决方案的测试。
.container {
resize: both;
overflow: auto;
position: relative;
width: 200px;
height: 200px;
padding-top: 20px;
display: flex;
justify-content: flex-end;
}
.image {
margin-top: auto;
width: 100%;
height: 0;
padding-top: 150%;
background-size: contain;
background-repeat: no-repeat;
}<div class="container">
<div class="image" style="background-image: url('https://picsum.photos/200/300');"></div>
</div>工作原理：
.container有：
-
display: flex，重要的是让"保证金魔法"发挥作用， -
justify-content: flex-end将带有图像的div推到底部; -
padding-top: 20px始终保留您想要的空白空间
.image有：
-
width: 100%水平填充空间， -
height: 0和padding-top: 150%保持图像比例， -
background-repeat: no-repeat图像只使用一次，contain它水平填充div， -
margin-top: auto具有父项display: flex允许垂直移动div，但受父项填充的约束，
编辑以响应
OP评论 似乎，即使您不知道图像宽度和高度，您仍然可以使用此方法，因此无法计算比率 - 如果您稍微修改一下。它实际上使它变得更加简单
.container {
resize: both;
overflow: auto;
position: relative;
width: 200px;
height: 200px;
padding-top: 20px;
display: flex;
justify-content: flex-end;
}
.image {
margin-top: auto;
width: 100%;
height: auto;
}<div class="container">
<img class="image" src='https://picsum.photos/200/300'></div>
</div>如果容器更高，img 将拉伸，如果它更宽，它将拉伸。 在顶部添加 20px 将从底部剪切 20px。
background-size:100% 100%;
background-repeat:no-repeat;
在没有看到您拥有的标记的情况下，我创建了您可以参考的此示例。关键是将div 从顶部定位 xxx，这样它就不会覆盖顶部空间。
您可以使用整页代码段或 https://jsfiddle.net/xen6hszn/查看它如何调整大小
body{
width: 100%;
height: 100vh;
background: grey;
margin: 0;
padding: 0;
}
div {
background: url(https://wallpaperbrowse.com/media/images/_89716241_thinkstockphotos-523060154.jpg) left bottom no-repeat;
background-size: contain;
height: 80vh;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}<div>
</div>