我想将我的字幕直接放在我的图像上，但是屏幕尺寸发生变化时，字幕会被留下。有啥解决办法吗？

Posted 2023-03-07

【中文标题】我想将我的字幕直接放在我的图像上，但是屏幕尺寸发生变化时，字幕会被留下。有啥解决办法吗？

【英文标题】：I want to position my captions directly on my images but where screen size changes, captions are left behind. Any fix for this?我想将我的字幕直接放在我的图像上，但是屏幕尺寸发生变化时，字幕会被留下。有什么解决办法吗？

【发布时间】：2021-09-25 11:38:12

【问题描述】：

我有一个方向设置为包含两个 div 的行的弹性框。左边的 div 有一个图像，而右边的 div 用作两个设置为 column 的子 div 的容器，每个子 div 都包含一个图像。 我试图将字幕直接放在图像的中间位置，但是在屏幕尺寸发生变化的情况下，字幕会留在视口空间中浮动。

我尝试将字幕绝对定位在其对应的图像上，同时设置它们相对于容器的位置。但是，我设置的尺寸与整个视口相对应，而不是它们的容器。 救命！

<div id="container">
           <div id="large">
               <img class="img-large" src="large.jpg">
               <div id="caption-span-large">
                   <h3 class="caption">The Dark Playground</h3>
               </div>
           </div>

           <div id="small-frame">
               <div class="small"><img class="img-small" src="small1.png">
                   <div class="caption-span-small1">
                       <h3 class="caption">The Red Night Jedi Camp</h3>
                   </div>
               </div>
               <div class="small"><img class="img-small" src="small2.png">
                   <div class="caption-span-small2">
                       <h3 class="caption">The Red Night Jedi Camp</h3>
                   </div>
               </div>
           </div>
       </div>

#container
    display: flex;
    width: 50%;



#large
    border-radius: 5px;
    height: 400px; 
    width: 50%;
    border: lawngreen solid 2px;
    position: relative;
    display: inline-block;


#small-frame
    display: flex;
    flex-direction: column;
    width: 50%;
    border: lawngreen solid 2px;


.small
    border-radius: 5px;
    height: 200px;
    border: green solid 2px;


#caption-span-large
    background-color: rgba(224, 83, 101, 0.63);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 25%;


.caption-span-small1
   background-color: rgba(224, 83, 101, 0.63);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;


.caption-span-small2
    background-color: rgba(224, 83, 101, 0.63);
     border-radius: 10px;
     position: absolute;


.caption
    color: honeydew;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 15px;

    background-color: rgba(224, 83, 101, 0.63);
    border-radius: 10px;
    position: absolute;
    top: 200px;
    left: 120px;


.img-large
    height: 400px;
    max-width: 100%;
    


.img-small
    height: 200px;
    max-width: 100%;

【问题讨论】：

使用relative定位而不是absolute。

您能详细说明一下吗？

【参考方案1】：

position 属性设置为 absolute 相对于最近的具有position: relative 的父元素起作用。如果没有这样的元素，则定位是相对于页面的左上角。由于在您的代码中 position: relative 仅针对 #large 块指定，因此布局分崩离析。

因此，对于.small块，还需要设置position: relative。

如果我正确理解了任务，那么代码将如下（运行 sn-p，展开 sn-p 并通过抓住右下角调整块的大小）：

#container 
  display: flex;
  height: 400px;
  width: 50%;
  /* Only for demo */
  overflow: hidden;
  resize: both;


#large 
  position: relative;
  width: 50%;
  border: lawngreen solid 2px;
  border-radius: 5px;


#small-frame 
  display: flex;
  flex-direction: column;
  width: 50%;
  border: lawngreen solid 2px;


.small 
  position: relative;
  height: 50%;
  border: green solid 2px;
  border-radius: 5px;


#caption-span-large,
.caption-span-small 
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  background-color: rgba(224, 83, 101, 0.63);


.caption 
  display: inline-block;
  border-radius: 10px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 15px;
  text-align: center;
  color: honeydew;
  background-color: rgba(224, 83, 101, 0.63);


.img-large 
  height: 400px;
  max-width: 100%;


.img-small 
  height: 200px;
  max-width: 100%;

<div id="container">
  <div id="large">
    <img class="img-large" src="large.jpg">
    <div id="caption-span-large">
      <h3 class="caption">The Dark Playground</h3>
    </div>
  </div>

  <div id="small-frame">
    <div class="small">
      <img class="img-small" src="small1.png">
      <div class="caption-span-small">
        <h3 class="caption">The Red Night Jedi Camp</h3>
      </div>
    </div>
    <div class="small">
      <img class="img-small" src="small2.png">
      <div class="caption-span-small">
        <h3 class="caption">The Red Night Jedi Camp</h3>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢！！你是救世主！我看到“改造”起着非常重要的作用。但它到底在做什么？提前致谢

@Kay_Erl：属性top: 50% 和left: 50% 将元素的左上角相对于其父元素居中，transform: translate (-50%, -50%) 移动（返回）块自身宽度的一半，并且高度。

非常感谢@UModeL！你的解释真的是可以理解和有帮助的??