如何使图像上的文本块响应？答案

【问题标题】：How to make text block on image responsive?如何使图像上的文本块响应？
【发布时间】：2019-06-16 11:54:05
【问题描述】：

我在图像上创建了一个文本块，但是当我在 iPad 和 iPhone 上查看网站时，图像保持正常，但文本移动了。如何使此文本具有响应性？

这是我使用的代码：

    <style>
.container {
  position: relative;
  font-family: Arial;

}

.text-block {
  position: absolute;
  bottom: 20px;
  left: 95px;
  right: 740px;
  background-color: white;
  opacity: 0.75;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

</style>
</head>
<body>
<div class="container">
  <center><img src="http://test.preci-dental.be/wp-content/uploads/2019/01/helping-your-child-trust-the-dentist-1110x450-1024x415.jpg" alt="Nature" style="width:90%;"></center>
  <div class="text-block">
<h1 style="color:#749C91;">Preci-Dental</h1>
    <br><p style="color:black;">Welkom bij tandartspraktijk Preci-Dental. De groepspraktijk werd door Liesbeth en Karel opgericht in 2019 en is gevestigd in Bertem, gelegen tussen Leuven en Brussel. Bij Preci-Dental streven we naar moderne mondzorg op maat voor iedereen: precieze en persoonlijke service, gebaseerd op bewezen efficiënte en moderne technieken.</strong></p>
  </div>
</div>

提前谢谢你！

【问题讨论】：

标签： html css image text responsive

【解决方案1】：

如果您不介意使用媒体查询，我想这应该可以解决您的问题：

PS：我使用“！important”是因为我通过插件注入了代码。在您的情况下可能不需要。

我还假设您希望文本区域为视口宽度的 70%，媒体查询中的最大宽度为 600 像素。因此，当您的视口宽度小于 600 像素时，代码将覆盖此选择器的 css。

关于媒体查询：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px) {
  .text-block {
    left: auto !important;
    right:auto !important;
    min-width:70vw;
  }
}

【讨论】：

嗨丹尼尔，我添加了这段代码，但只是部分工作。当您在计算机浏览器中调整屏幕大小时，您也可以看到它。屏幕水平或垂直方向也有区别。我该如何解决这个问题？
我还有另外一件很奇怪的事情：当查看顶部的地址、电话和电子邮件时，当您开始从家到团队的导航时，文本的视觉效果会有所不同。这怎么可能？