Javascript 将文本与背景图像底部对齐，大小为

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

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=函数（事件）{
posInfo（）
};
函数posInfo（）{
var positionInfo=slide.getBoundingClientRect（）；
变量高度=位置信息高度；
变量宽度=位置信息宽度；
info.style.width=宽度+px
info.style.height=高度+px
}
posInfo（）

*{
保证金：0；
填充：0；
背景：黑色；
框大小：边框框；
}
img{
最大宽度：100%；
}
.全屏{
宽度：100%；
高度：100vh；
位置：绝对位置；
边框：100像素纯黑；
}
#滑梯{
边框：2倍纯红；
位置：相对位置；
身高：100%；
显示：块；
背景：url（“http://c0177.paas1.ams.modxcloud.com/standard/8.jpg")
无重复中心；
背景尺寸：包含；
z指数：3；
}
#信息{
边框：2倍纯黄色；
显示：块；
z指数：3；
背景：透明；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#信息a{
位置：绝对位置；
底部：0；
背景：黄色；
填充：20px 120px；
左：50%；
转化：translateX（-50%）；
}

项目名称

因此，我认为您想要实现的一种方法是将

.fullscreen

类变成一个以内容为中心的css网格。然后，不用图像作为背景，只需将其放在图像标记中，它将在max height的帮助下模仿

contain

样式。以下是一个例子：

注意：

calc（100vh）

是由于

100px

边框造成的

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

---

为什么不能使用包装器div元素？然后问题就简单多了。由于背景大小的原因，包装器div的高度不会与背景图像相同：containthis几乎可以工作，但当您按高度调整大小时，图像不再按比例缩放。只需添加img{max width:100%}，现在就可以完美地工作了，谢谢@加雷斯·琼斯。如果此解决方案解决了您的问题，请将其标记为正确。您能批准修改吗？

.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%;
}

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