将文字对齐到背景图片的底部，并且包含的​​大小为

Question

我需要将文本对齐到背景图像的底部（顶部上方），并按以下比例缩放：

background-size: contain;

我尝试通过匹配图像元素的大小来使用javascript缩放文本容器：

var positionInfo = slide.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;

info.style.width=width + "px"
info.style.height=height + "px"

但是我无法获得背景图片的实际大小，仅包含其中的元素。有没有一种方法可以获取背景图像的确切大小？

完整代码：

var info = document.getElementById('info');
var slide = document.getElementById('slide');


window.onresize = function(event) {
  posInfo()
};


function posInfo() {
  var positionInfo = slide.getBoundingClientRect();
  var height = positionInfo.height;
  var width = positionInfo.width;

  info.style.width=width + "px"
  info.style.height=height + "px"
}

  posInfo()

* {
  margin: 0;
  padding: 0;
  background: black;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.fullscreen {
  width: 100%;
  height: 100vh;
  position: absolute;
  border: 100px solid black;
  
}

#slide {
  border:2px solid red;
  position: relative;
  height: 100%;
  display: block;
  background: url("http://c0177.paas1.ams.modxcloud.com/standard/8.jpg")
    no-repeat center center;
  background-size: contain;
  z-index:3;
}

#info {
  border:2px solid yellow;
  display:block;
  z-index:3;
  background:transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

  
 #info a {
    position:absolute;
    bottom:0;
    background:yellow;
    padding:20px 120px;
    left: 50%;
    transform: translateX(-50%);
  }

<div class="fullscreen">
    <div id="slide"></div>
    <div id="info"><a>Project name</a></div>
</div>

Answer 1

因此，完成我认为您想做的事情的一种方法是使.fullscreen类成为使内容居中的CSS网格。然后，您不用将图像作为背景，而是将其放在图像标签中，它将在max-height的帮助下模仿contain样式。这是一个示例：https://codepen.io/omnitect/pen/wxEMjG

<div class="fullscreen">
    <div id="slide">
      <img src="https://c0177.paas1.ams.modxcloud.com/standard/8.jpg" />
      <div id="info"><a>Project name</a></div>
    </div>
</div>

此外，在样式中，您想要修改#info以使其不具有变换，它只需要一个非常基本的位置样式即可。

.fullscreen {
  width: 100%;
  height: 100vh;
  position: absolute;
  border: 100px solid black;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
}

#slide {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  border: 2px solid red;
  position: relative;
  display: block;
  z-index: 3;
  max-height: calc(100vh - 200px);
}

#slide img {
  max-height: calc(100vh - 200px);
  width: auto;
  max-width: 100%;
}

注意：calc(100vh)是由于100px边框造成的。

#info {
  border:2px solid yellow;
  display: block;
  z-index:3;
  position: absolute;
  bottom: 0;
  left: 50%;
}