背景尺寸/位置-覆盖宽度，以及距顶部的最小偏移量

Question

我有一个带有背景图片的容器。我希望它：

始终填满容器的宽度
如果容器的高度变大，图像应该贴在底部并增加顶部的间隙
如果容器的高度比图像短，它应该在顶部保持 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 &amp; Wider</strong>
<div class="taller wider" style="background-image: url('https://picsum.photos/200/300');"></div>

<strong>Taller &amp; Narrower</strong>
<div class="taller narrower" style="background-image: url('https://picsum.photos/200/300');"></div>

<strong>Shorter &amp; Wider</strong>
<div class="shorter wider" style="background-image: url('https://picsum.photos/200/300');"></div>

<strong>Shorter &amp; Narrower</strong>
<div class="shorter narrower" style="background-image: url('https://picsum.photos/200/300');"></div>

Answer 1

没有看到你有什么标记，我创建了这个例子你可以参考。关键是让 div 从顶部定位 xxx，这样它就永远不会覆盖顶部 space。

您可以使用完整页面片段或 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>

Answer 2

可以只使用 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，让 "margin magic" 工作很重要，
justify-content: flex-end 将带有图片的 div 推到底部；
padding-top: 20px 始终保留您想要的空白 space

.image 有：

width: 100%水平填充space，
height: 0和padding-top: 150%保持图片比例，
background-repeat: no-repeat 所以图像只使用一次，并且 contain 它水平填充 div，
margin-top: auto with display: flex of parent 允许垂直移动 div，但受限于父 padding，

编辑回应 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>

Answer 3

如果容器较高，则 img 会拉伸，如果容器较宽，则会拉伸。在顶部添加 20px 将从底部减少 20px。

background-size:100% 100%;
background-repeat:no-repeat;

背景尺寸/位置-覆盖宽度，以及距顶部的最小偏移量

Background size / position - cover the width, and a minimum offset from the top

css

background-image

background-position

background-size