Question

我有几个背景图像，用于沿着地平线重建人物的场景。我想让图像本身增长但保持在这个视界/基线。

这是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;}}

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

我想要实现的目标的图像

horizon/baseline image background

我怎样才能做到这一点？

Answer 1

在你的css id #missSaturn中，将transform-origin:bottom 50%切换为transform-origin:50% bottom

Answer 2

如果您可以对该特定元素使用绝对定位，那么合并top: 50%;和transform: translateY(-50%);可以解决问题。

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

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

您可以在此处看到Codepen example。

通过这种方式，元素的基线在不同的屏幕尺寸中是一致的，它始终位于该元素的容器中间。

Answer 3

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

.top将底部div - .footer - 向下推至100％min-height。页脚高度被减去 - using calc - 使其粘在视口的底部。
.top会获得一个居中的背景图片，由于background-size属性，该图片会缩放。 bottom值会始终将其保留在.top div的底部。
max-width: 100%可以根据需要缩小

工作示例

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
}
.top {
  min-height: calc(100% - 394px);
  background: url(http://www.placehold.it/500) center bottom no-repeat;
  background-size: 20%
}
.footer {
  height: 394px;
  background: #F90;
}
iframe {
  margin: 0 auto;
  display: block;
  max-width: 100%
}

＆＃13;

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

＆＃13;

CSS定位和缩放图像的底部原点已修复

3 个答案:

工作示例