如何将位置图像固定在另一幅图像上

Question

我有以下 code（也粘贴在下面），我想在其中制作两列的布局。在第一个中我放了两张图片，在第二个中显示了一些文字。

在第一列中，我想要第一张带有 width:70% 的图片和第二张带有 position:absolute 的图片。最终结果应该是 this

如您所见，第二张图片部分位于上面每个屏幕中的第一张图片到 768px。

我可以在第一张图片上部分定位第二张图片，但这不是动态的，如果您更改屏幕尺寸，您可以看到它是如何折叠的。

但是无论我怎么努力，我都达不到这个结果

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
}

/* this .phone class should be dynamically  located partially on first image */
.phone {
  position: absolute;
  height: 90%;
  top: 5%;
  bottom: 5%;
  margin-left: 18%;
}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
}

.someContent {
  border: 1px solid red;
}

/* removing for demo purposes
@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }
  img {
    display: none;
  }
  .CheckoutProcess {
    padding: 0;
  }
}
*/

<div class="checkoutWrapper">
  <img src="https://via.placeholder.com/300" class="coverIMGLast" />
  <img src="https://via.placeholder.com/300/ff0000" class="phone" />

  <div class="CheckoutProcess">
    <Content />
  </div>
</div>

Answer 1

使用下面的代码，您就拥有了想要的结构。您所要做的就是使用 width、height 等来制作您需要的东西。

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.checkoutImgs {
  position: relative;
  border: 2px solid red;
}

img{
  object-fit:cover;
  display:block;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
  
}

  
.phone {
  position: absolute;
  height: 80%;
  width:40%;
  top: 10%;
  right: 0;

}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
  border: 2px solid blue;
}



/* removing for demo purposes
@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }
  img {
    display: none;
  }
  .CheckoutProcess {
    padding: 0;
  }
}
*/

<div class="checkoutWrapper">
  <div class="checkoutImgs">
    <img src="https://via.placeholder.com/300" class="coverIMGLast" />
    <img src="https://via.placeholder.com/300/ff0000" class="phone" />
  </div>

  <div class="CheckoutProcess">
    <Content />
  </div>
</div>

Answer 2

查看此代码，我为您创建了此设计，可能对您有所帮助...

enter image description here

    body {
        padding: 0;
        margin: 0;
    }

    .parent {
        display: flex;
        position: relative;
        align-items: center;
    }

    .left {
        width: 37%;
        background-color: blue;
        height: 100vh;
    }

    .right {
        width: 63%;
        background-color: red;
        height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-container {
        position: absolute;
        height: 60%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .image {
        height: 500px;
        width: 250px;
        background-color: grey;
        margin-left: 30%;
        border-radius: 20px;
    }

<body>


    <div class='parent'>
        <div class='left'></div>
        <div class='right'>
            <div>
                <h3>THis is a heading</h3>
                <p>this is a para</p>
                <p>this is a para</p>
                <p>this is a para</p>
            </div>
        </div>

        <div class="image-container">
            <div class="image"></div>
        </div>
    </div>


</body>

Answer 3

您可以使用transform和aspect-ratio来实现结果：

.checkoutWrapper {
  display: grid;
  grid-template-columns: 30% 70%;
  height: 100vh;
}

.left {
  background-color: #baafa0;
  position: relative;
  
  background-image: url('https://picsum.photos/id/1028/200/300');
  background-size: cover;
}

.phone {
  height: 60%;
  aspect-ratio: 1/2;
  
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  
  border-radius: 15%;
}

.right {
  padding-left: calc(15vh + 1rem);
}

<div class="checkoutWrapper">
  <div class="left">
    <img class="phone" src="https://via.placeholder.com/300/444" />
  </div>
  <div class="right CheckoutProcess">
    <Content>
      <h1>Check Out</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda consectetur ducimus officiis dicta vero distinctio odio sit explicabo illum dolorem quasi facilis repellendus sapiente fuga corporis, iure dolore ad, quis quisquam? Dolorum nostrum, veritatis
        molestiae culpa maiores exercitationem cumque qui harum, unde est ratione doloremque necessitatibus et numquam itaque neque!
      </p>
    </Content>
  </div>
</div>

Answer 4

我编辑了你的code

你写的一切都是正确的。

您只是忘记添加 margin-left: 25%。无论您使用哪个屏幕，它总是部分位于第一个屏幕上。（按中心）

Answer 5

您可以将第一张图片作为背景图片，然后指定background-size您想要的任何尺寸。然后在 <div> 元素内添加第二张图片。

#bg-img{
  background-image:url('https://images.pexels.com/photos/36029/aroni-arsa-children-little.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-color: #999;
}
#img-inside{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:15%;
}

<div id="bg-img">
  <img id="img-inside" src="https://images.pexels.com/photos/36029/aroni-arsa-children-little.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="second-img" />
</div>

我刚刚在代码段

中制作了左侧div

Answer 6

* {
  margin: 0;
}

.checkoutWrapper {
  display: grid;
  grid-template-columns: 35% 25% 40%; /* create three columns to fit both images  */
}

.coverIMGLast {
  width: calc(100% - 195px); **/* give that illution of real overlapping */**
  height: 100vh; /* please don't delete this line */
  grid-column: 1 / 3; /* overlapping */
  grid-row: 1;
  object-fit: cover;
}
/* this .phone class should be dynamically  located partially on first image */
.phone {
  height: 90vh;
  width: 380px;
  grid-row: 1; /* setting the images on one track / row */
  grid-column: 1/3; /* overlaping */
  justify-self: end;
  transform: translateY(5vh);
}

.CheckoutProcess {
  padding: 5.8rem 0.5rem 6.4rem; /* Add normal padding to give that effect */
}

.someContent {
  border: 1px solid red;
}

@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }

  img {
    display: none;
  }

  .CheckoutProcess {
    padding: 0;
  }
}

<div class="checkoutWrapper">
  <img src="https://via.placeholder.com/300" class="coverIMGLast" />
  <img src="https://via.placeholder.com/300/ff0000" class="phone" />
  <div class="CheckoutProcess">
    <div class="someContent">
      <h1>Some heading</h1>
      <p> 
        Some text to go with the paragraph 
      </p>
    </div>
  </div>
</div>

https://react-2djy5g-tsheob.stackblitz.io/

从上面的代码和您编辑的代码 link 中可以看出。

您只需要通过使用 grid-column 并使用模板列来营造一种重叠的错觉即可营造出 book-like 的感觉。

与 :

grid-template-columns: 35% 25% 40%; /* 创建三列以适合两个图像 */
grid-row: 1; /* 将图像设置在一个轨道/行上 */
grid-column: 1/3; /* 重叠 */
justify-self: end; /* 将图像放在网格的右侧 */

如何将位置图像固定在另一幅图像上

How to fix position image on another image

html

css

css-grid