Question

我在图像上放置了一些文字，但是当我更改屏幕尺寸时，文字移出图像并溢出。无论屏幕大小如何，如何修复该图像上文本的位置？

.row {
  margin: 0;
  width: 100%
}

.timeline_feed_image {
  position: relative;
}

.Image_text_Div {
  position: absolute;
  top: 14rem;
  padding: 3rem;
}

<div class="row">
  <div class="timeline_feed_imagesDiv">
    <img class="timeline_feed_image" src="https://placehold.it/400" alt="">
    <div class="Image_text_Div">
      <p>Lorem Ipsum is simply dummy text of the printing.</p>
      <p>It is a small world after all. Globalization is that great process
that #started perhaps with Mr. Marco Polo Globalizationis that great...</p>
    </div>
  </div>
</div>

Answer 1

目前还不清楚你的回应是什么意思。

响应式设计意味着使您的网站设计适应其显示的屏幕大小。但是图像尺寸不会改变。因此，您的问题似乎归结为：如何确保我的文字不会用完图像？

答案是：确保文本所在的容器具有相同的图像大小，然后确保文本不会从此容器中生长出来并隐藏任何overflow。这是一个演示。

＆＃13;

.row {
  margin: 0;
  width: 100%
}

.timeline_feed_imagesDiv {
  position: relative;
  display: inline-block;
  font-size: 0;
}

.Image_text_Div {
  position: absolute;
  top: 14rem;
  box-sizing: border-box;
  max-height: calc(100% - 14rem);
  padding: 3rem;
  font-size: 1rem;
  overflow: hidden;
}

＆＃13;

<div class="row">
  <div class="timeline_feed_imagesDiv">
    <img class="timeline_feed_image" src="https://placehold.it/400" alt="">
    <div class="Image_text_Div">
      <p>Lorem Ipsum is simply dummy text of the printing.</p>
      <p>It is a small world after all. Globalization is that great process
that #started perhaps with Mr. Marco Polo Globalizationis that great...</p>
    </div>
  </div>
</div>

＆＃13;

这种方法的关键方面：

通过组合使.timeline_feed_imagesDiv容器适合其中的图像
- display: inline-block，使容器的宽度现在不等于其父宽度，但其内容的宽度，图像）;和
- font-size: 0，它会使图像和文本div元素之间的空白不显示并影响容器的大小。
使文本适合容器
- 设置max-height，将其限制在.timeline_feed_imagesDiv容器中;
- 设置box-sizing: border-box以便在计算max-height时填充is included;
- 使用overflow: hidden隐藏溢出。
由于font-size: 0黑客攻击，需要在文本div中重置字体大小。这是font-size: 1rem的用途。

您可以将overflow: hidden更改为overflow-y: auto以显示滚动条，而不是隐藏文字。

Answer 2

您可以在CSS中添加背景图片：

.Image_text_Div {
  position: absolute;
  top: 14rem;
  padding: 3rem;
  background-image: url("https://placehold.it/400");
}

如何使图像上的文字响应？

2 个答案: