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

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，让“margin magic”发挥作用很重要，

• 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，但受父 padding 限制，

EDIT 回应 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>