我有几张背景图片，用于重建一个人沿着地平线的场景。我想让图像本身增长但保持在这个地平线/基线。
这是 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:
html{
height:100%;
width:100%;}
body{
height:100%;
background:url(images/ground2.png) no-repeat,
url(images/spaceBackground.jpg)no-repeat;
background-size: cover;
background-position:0 300px,0 0 ;}
iframe{
margin:0 auto;
box-shadow: 5px 5px yellow;
max-width: 100%;}
.container-fluid{
display: inline-block;
height: 100%;
width: 100%;
padding-left:0;
padding-right:0;}
#video {
display: block;
margin: 0 auto;
min-width:300px;
margin-top: 300px;
margin-bottom: 30px;}
.row{
margin: 0 auto;}
#missSaturn{
z-index:-1;
margin: 0 auto;
max-width:80%;
position:fixed;
transform-origin:bottom 50%;}
.foreground{
z-index: 100;}
@media all and (min-width:300px){
#missSaturn{
top:30%;}}
@media all and (min-width:400px){
#missSaturn{
top:200px;
left:15%;}}
@media all and (min-width:600px){
#missSaturn{
top:100px;}}
@media all and (min-width:800px){
#missSaturn{
top:50px;}}
基本上这就是我想要实现的目标。随着浏览器/设备从左到右调整大小，图像会缩小，但其原点位于该基线。
我正在努力实现的目标的图片
我怎样才能做到这一点？
最佳答案
在您的 css id #missSaturn 中将 transform-origin:bottom 50% 切换为 transform-origin:50% bottom
关于jquery - 底部原点固定的 CSS 定位和缩放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29736906/