Question

我的图片上的文字存在问题。我的文字在桌面上工作，至少在我的计算机分辨率上。但问题是当我缩小它时，它并没有跟上图像的说法。知道怎么做或者出了什么问题？

HTML：

<div class="col-4 text-center image-capsule mx-auto">
  <section class="posters-section">
    <a href="/" class="movie-link pop">
      <p class="poster-date">Test</p>
      <img class="img-fluid poster" data-toggle="popover" src="${app.movie[0].poster}">
    </a>
  </section>
  <h5 class="mt-3">${app.movie[0].title}</h5>
</div>

CSS：

.image-capsule {
  width: 33%;
  position: relative;
}

.posters-section {
  position: relative;
}

.poster {
  position: relative;
}

.poster-date {
  margin: -5% 26%;
  font-weight: bold;
  z-index: 100;
  background-color: #9c0000;
  position: absolute;
  width: 51%;
  text-align: center;
}

Answer 1

我遇到了类似的问题。我通过在文本上使用bootstraps文本中心类来修复此问题。这使它们保持在div的中心，拿着照片将它们与图片保持在一起。这是我所做的一个例子。

<div class="margin-intercept shrink-to-necessary-size">    
                        <a href="350_project.html">
                            <img src="images/IMG_2579.JPG" width="350" height="350">
                        </a>

                        <h3 class="picwidth text-center">350 Project</h3>

                    </div>

无论屏幕如何缩小，这都会使文字保持在图像中心。

文字对海报图片没有反应

1 个答案: