背景大小/位置 - 覆盖宽度，并与顶部的最小偏移量

Question

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

1. 始终填满容器的宽度
2. 如果容器的高度变大，图像应该贴在底部并增加顶部的间隙
3. 如果容器的高度比图片短，它应该在顶部保持 20px 的间隙，隐藏图片的底部（因为它溢出）
4. 我不知道 CSS 中图像的高度/宽度
5. 图像不应倾斜（应保持纵横比）

似乎我需要的是宽度上的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

仅使用 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 with display: flex of parent 允许 div 垂直移动，但受 parent 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 2

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

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

Answer 3

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

您可以使用整页 sn-p 或 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>