Jquery 固定底部原点的CSS定位和缩放图像_Jquery_Html_Css

Jquery 固定底部原点的CSS定位和缩放图像

jquery html css

Jquery 固定底部原点的CSS定位和缩放图像,jquery,html,css,Jquery,Html,Css,我有几个背景图像，它们被用来沿着地平线重建一个人的场景。我想使图像本身增长，但保持在这个地平线/基线上以下是html： <body> <div class="container-fluid"> <div class="row foreground"> <center> <img class="foreground" src="css/images/BandName.png" alt="Planet of th

我有几个背景图像，它们被用来沿着地平线重建一个人的场景。我想使图像本身增长，但保持在这个地平线/基线上

以下是html：

<body>
<div class="container-fluid">
    <div class="row foreground">
    <center>
        <img class="foreground" src="css/images/BandName.png" alt="Planet of the Abts">
        <img class="foreground" src="css/images/AlbumTitle.png" alt="Planet of the Abts">
    </center>
    </div>

    <img id="missSaturn" src="css/images/miss_Saturn.png" alt="">

    <div id="videoDiv">
        <iframe id="video" width="700" height="394" align="center" src="https://www.youtube.com/embed/qMlyymUYjEM" frameborder="0" allowfullscreen></iframe>
    </div>

</div>

本质上，这就是我想要实现的目标。当浏览器/设备从左向右调整大小时，图像将缩小，但其原点位于该基线

我试图实现的形象

如何实现这一点？

在css id missSaturn中，将变换原点：底部50%切换为变换原点：底部50%

如果可以对特定元素使用绝对定位，则组合顶部：50%；转化率：translateY-50%；我能做到

center {
  position: absolute;
  bottom: 20vh;
  width: 100%;
  height: 20vh;
  background-color: skyblue;
}

.foreground {
  position: absolute;
  top: 50%;
  width: 20%;
  transform: translateY(-50%);
}

你可以在这里看到

这样，元素的基线将在不同的屏幕大小中保持一致，始终位于该元素容器的中间。

这可以通过粘性页脚实现：

.top以100%最小高度向下推动底部div-.footer。将减去页脚高度--使其粘贴到视口底部

.top被赋予一个居中的背景图像，该图像将根据“背景大小”属性进行缩放。底部值将始终保持在.top div的底部

最大宽度：iframe上的100%允许在需要时缩小

工作示例 html，身体{ 身高：100%；保证金：0； } .顶{ 最小高度：calc100%-394px；背景：urlhttp://www.placehold.it/500 中底不重复；背景尺寸：20% } .页脚{ 高度：394px；背景：F90； } iframe{ 保证金：0自动；显示：块；最大宽度：100% } 尝试变换原点：50%底部；而不是变换原点：底部50%；。X轴优先。

center {
  position: absolute;
  bottom: 20vh;
  width: 100%;
  height: 20vh;
  background-color: skyblue;
}

.foreground {
  position: absolute;
  top: 50%;
  width: 20%;
  transform: translateY(-50%);
}