Question

我在图像上写了文字。当我调整浏览器大小时，文本会缩小。为什么会这样？当我调整浏览器大小时，有没有办法防止文本缩小？

＆＃13;

 #center p {
   position: absolute;
   text-align: center;
   color: white;
   font-size: 20px;
   left: 150px;
   top: 800px;
   font-family: "Trebuchet MS";
 }
 #center1 p {
   position: absolute;
   text-align: center;
   color: white;
   font-size: 20px;
   top: 820px;
   font-family: "Trebuchet MS";
 }
 #center2 p {
   position: absolute;
   text-align: center;
   color: white;
   left: 450px;
   font-size: 20px;
   top: 840px;
   font-family: "Trebuchet MS";
 }
 #center3 p {
   position: absolute;
   text-align: center;
   color: white;
   font-size: 20px;
   top: 880px;
   font-family: "Trebuchet MS";
 }
 #center4 p {
   position: absolute;
   text-align: center;
   color: white;
   font-size: 20px;
   top: 900px;
   font-family: "Trebuchet MS";
 }
 #center5 p {
   position: absolute;
   text-align: center;
   color: white;
   left: 450px;
   font-size: 20px;
   top: 920px;
   font-family: "Trebuchet MS";
 }
 #center img {
   width: 100%
 }

＆＃13;

<div id="center">
  <img id="img" src="images/1.jpg" alt="img" width="1280">


  <p>
    In 2050, we are projected to have 9 billion on this planet. These people will eat and drink just like we do..</p>
  <div id="center1">
    <p>requiring a doubling of food production. But food and water security already are the largest challenges for a</p>
  </div>

  <div id="center2">
    <p>thriving global population.</p>
  </div>





  <div id="center3">
    <p>Drops and Crops is a network of stusome text some text some text some text some text some tesxt some text to tackle this</p>
  </div>
  <div id="center4">
    <p>great challenge of our some text some text some text some text some textby the Water</p>
  </div>


  <div id="center5">
    <p>for Food Institut.</p>
  </div>



</div>

＆＃13;

https://jsfiddle.net/pLyd6zv1/

Answer 1

你的规则＆＃34; #center img＆＃34;告诉它有100％的宽度，所以无论视口的大小是多少，它都会延伸出来。删除它。

Answer 2

图片没有显示，但我会在#center img上添加max-width：100％和宽度：100％。此外，不确定您是否使用引导程序，但您还应该使用html中的img-responsive类来根据浏览器宽度缩放图像。

Answer 3

我不了解您的要求，但您不需要为每个新文本行添加新的div，也不需要p。

其他人都是正确的，你的CSS样式设置得太严格，会把你的文本收起来。尝试将所有内容放在一个div中，如果您需要将图像作为背景集

background-image: url(url-of-your-image.png);

也许这个更新的小提琴将有助于https://jsfiddle.net/pLyd6zv1/2/

Answer 4

在包装器中添加文本并将其设置为position: absolute

在下面，我删除了position: absolute元素的所有top: ??px和p，并在标记中添加了注释规则和<div class="wrap">元素。

要删除p元素之间的空格，我已将margin: 0;添加到#center p

#center {                /*  added rule   */
  position: relative;
}
#center img {
  width:100%;
}
#center .wrap {          /*  added rule   */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#center p {
  text-align: center;
  color:white;
  font-size: 20px;
  left: 150px;
  font-family: "Trebuchet MS";
  margin: 0;                      /* added prop. to remove space */
}
#center1 p {
  text-align: center;
  color:white;
  font-size: 20px;
  font-family: "Trebuchet MS";
}
#center2 p {
  text-align: center;
  color:white;
  left:450px;
  font-size: 20px;
  font-family: "Trebuchet MS";
}
#center3 p {
  text-align: center;
  color:white;
  font-size: 20px;
  font-family: "Trebuchet MS";
}
#center4 p {
  text-align: center;
  color:white;
  font-size: 20px;
  font-family: "Trebuchet MS";
}
#center5 p {
  text-align: center;
  color:white;
  left:450px;
  font-size: 20px;
  font-family: "Trebuchet MS";
}

<div id="center">
  <img id="img" src="http://lorempixel.com/1024/768/nature/2" alt="img" width="1280">

  <div class="wrap">
    <p>
      In 2050, we are projected to have 9 billion on this planet. These people will eat and drink just like we do..</p>
    <div id="center1"><p>	requiring a doubling of food production. But food and water security already are the largest challenges for a</p></div>

    <div id="center2"><p> thriving global population.</p></div>

    <div id="center3"> <p>Drops and Crops is a network of stusome text some text some text some text some text some tesxt some text to tackle this</p></div>
    <div id="center4"><p> great challenge of our some text some text some text some text some textby the Water</p></div>

    <div id="center5"><p>         for Food Institut.</p></div>

  </div>

</div>

调整浏览器大小时，图片上的文字会缩小

4 个答案: