相对于窗口调整大小移动文本，将其保留在背景图像中

Question

我假设这个问题已经被回答了很多遍，但是不幸的是，经过几个小时的搜索，我仍然无法解决它。

有人能说出保持窗口调整大小时相对于同级div /图像保持文本位置的最佳方法吗？

请找到附带的小提琴：

<div class="wrapper">
  <div class="text-box">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a>
</div>

$string = 'Hello ÄöÜ!';
var_dump(
    \Transliterator::create('Any-Upper; Latin-ASCII')->transliterate($string)
);

https://jsfiddle.net/ye5q4o2L/4/

Answer 1

您可以尝试类似的方法，这可能对您要实现的目标有所帮助。

它不会基于同级来设置位置，而是相对于父级而言，父级的大小由孩子决定。

html,
body,
.wrapper {
  /* stopping overflow - just for example */
  height:100%;
  text-align: center;
}

.wrapper .img-wrapper  {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.wrapper img {
  z-index:1;
  
  /* stopping overflow - just for example */
  max-height:100%;
  width:auto;
  max-width:100%;
}

.text-box {
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 20px;
}

.img-wrapper a {
 /* Set to block to capture the whole img element */
  display:block;
}

<div class="wrapper">
  <div class="img-wrapper">
    <div class="text-box">
      <p>lorem ipsum</p>
      <p>lorem ipsum</p>
    </div>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/770x690">
    </a>
  </div>
</div>

https://jsfiddle.net/ye5q4o2L/10/

Answer 2

由于图像具有已知的宽度/高度，您可以使用它们来定义文本容器的宽度/高度，然后将很容易实现：

.wrapper img,
.text-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.text-box {
  width:770px;
  height:690px;
  z-index: 1;
}

<div class="wrapper">
  <div class="text-box">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a>
</div>

Answer 3

没有指定宽度，高度的解决方案。

JSfiddle：https://jsfiddle.net/hardyrajput/knzL4bqu/3/

HTML：

<div class="wrapper">
  <div class="text-box">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
.wrapper {
    display: block;
    position: relative;
}
.wrapper .text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wrapper a {
    display: block;
}
.wrapper img {
    max-width: 100%;
    display: block;
}

Answer 4

如果您提前知道了兄弟姐妹的大小，则可以执行以下操作：

* {
  box-sizing: border-box; /* For padding */
}

.wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.text-box {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 770px;
  height: 690px;
  max-width: 100%;
  max-height: 100%;
  padding: 20px;
}

<div class="wrapper">
  <div class="text-box">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a>
</div>

Answer 5

    .wrapper {
      text-align:center;
    }
    
    .bg {
      position: relative;
      display:inline-block;
      margin: 0 auto;
    }
    
    .bg img  {
      width:100%;
    }
    
    .text-box {
      position: absolute;
      z-index: 1;
      top: 20px;
      left: 20px;
    } 

    <div class="wrapper">
      <div class="bg">
        <div class="text-box">
          <p>lorem ipsum</p>
          <p>lorem ipsum</p>
       </div>
        <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a>
      </div>
    </div> 

jsfiddle-https://jsfiddle.net/Sampath_Madhuranga/ye5q4o2L/33/

尝试一下。这很好用... 让我知道您是否有任何问题。

Answer 6

您可以尝试以下操作：

ax.set_aspect()

.wrapper{
  text-align: center;
}
.imgWrapper {
  display: inline-block;
  position: relative;
}
.text-box {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 20px;
}

<div class="wrapper"> <div class="imgWrapper"> <div class="text-box"> <p>lorem ipsum</p> <p>lorem ipsum</p> </div> <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a> </div> </div>的显示为.imgWrapper，因此它将占据图像的大小，文本框的位置为inline-block，因此它将相对于其父项{{1 }}。

Answer 7

请参阅此。我在这里添加width：100％;在.wrapper img类中。

如果需要设置高度。然后您可以将高度设置为：100％;（可选）。

https://jsfiddle.net/xczrptw8/

.wrapper img  {
position: absolute;
left: 50%;
top: 50%;
width:100%;
transform: translate(-50%, -50%);
z-index: 0;
}

.text-box {
 z-index: 1;
 position: relative;
top: 20px;
left: 20px;
}