浏览器调整大小时，图像上的文字不起作用答案

【问题标题】：Text over image does not work when browser resized浏览器调整大小时，图像上的文字不起作用
【发布时间】：2016-03-09 13:31:33
【问题描述】：

背景

我的网站需要一些基本的文本覆盖图像。我首先使用 rgb 和 rgba 函数提供了一个透明的黑框。然后通过将图像声明为“相对”并将文本声明为“绝对”来放置文本。

问题

当我调整浏览器大小时，文本向下方向用完图像。显示在https://jsfiddle.net/Lheg26kw/ 这是html-

<div class="hero-container">
<div class="hero-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
<div class="hero-text">
    <p>This is text<br>
    <span>this is some more text for trial of this problem</span></p>
</div>
</div>
</div>

这里是 CSS：

.hero-image{
position: relative;
width: 100%;

}
.hero-text p{ 
 position: absolute;
 text-align: center;
 bottom: 0px;
 top: 0px;
 width: 100%;
 background: rgb(0, 0, 0); /* fallback color */
 background: rgba(0, 0, 0, 0.4);
 padding-top: 80px;
 color: white;
  font-weight: bolder;
 }

.hero-text span{
font-weight: normal;
}

需要

在调整到最小数量后，我需要文本保留在图像上，即如果网站是通过手机访问的。

【问题讨论】：

段落的 padding-top 是固定数量的像素 (80px)。这就是为什么您的文本被下推的原因。将 padding-top 设为一个百分比（即 10%）以使其相对于图像。
在文本中添加前 20 - 25%，并为您的图像提供最小宽度，即 320 像素，或者您可以查看 flexbox 并使用此 css-tricks.com/snippets/css/a-guide-to-flexbox

标签： javascript html css image web

【解决方案1】：

如果您没有在图像上设置最小尺寸，那么最终文本无论如何都不会适合。但我建议的一件事是将您的 padding-top: 80px; 从恒定值 80px 更改为像 padding-top: 25%; 这样的百分比。这将有助于它随着图像大小的变化而更好地缩放。

【讨论】：

【解决方案2】：

您可以将内容克隆到 hero 下方的另一个 div 中，然后隐藏 .hero-text

$(window).on('resize', function() {

  var $mobileContent = $('.mobile-content');
  var $bodyWidth = $('body').width();

  if ($bodyWidth < 620) {
    var $innerHero = $('.hero-text').html();
    $mobileContent.html($innerHero);
  } else {
    $mobileContent.empty();
  }

}).trigger('resize');

body {margin: 0;}

.hero-image {
  position: relative;
  width: 100%;
}
.hero-text p {
  position: absolute;
  text-align: center;
  bottom: 0px;
  top: 0px;
  width: 100%;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.4);
  padding-top: 80px;
  color: white;
  font-weight: bolder;
}
.hero-text span {
  font-weight: normal;
}
.mobile-content {
  color: #000;
  font-weight: 700;
  text-align: center;
}
@media(max-width: 620px) {
  .hero-text {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="hero-container">
  <div class="hero-image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Old-Style_Balinese_Cat.png" width=100% height=80%>
    <div class="hero-text">
      <p>This is text
        <br>
        <span>this is some more text for trial of this problem</span>
      </p>
    </div>
  </div>
</div>

<div class="mobile-content"></div>

【讨论】：

【解决方案3】：

这会起作用：（用这些替换你的css）

  .hero-image{
    position: relative;
    width: 100%;    
  }
  .hero-image img{
    width:100%;
    display:block;
  }
  .hero-text{
    width:100%;
    height:100%;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.4); 
    position: absolute;
    top:0;
    left:0;
  }
  .hero-text p{ 
    position: absolute;
    text-align: center;
    top: 50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    width:100%;
    padding: 5px 0;
    margin:0;
    color: white;
    font-weight: bolder;
  }

  .hero-text span{
    font-weight: normal;
  }

【讨论】：