當我調整瀏覽器大小時，圖像上的文字會縮小

Question

我在圖片上寫了文字。 當我調整瀏覽器大小時，文本會縮小。 為什么會這樣？ 當我調整瀏覽器大小時，有沒有辦法防止文本縮小？

 #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% }

 <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>

https://jsfiddle.net/pLyd6zv1/

Answer 1

您對“#center img”的規則是告訴它具有 100% 的寬度，因此無論視口的大小如何，它都會將其拉伸。 去掉那個。

Answer 2

圖像沒有顯示出來，但我會在 #center img 上添加 max-width:100% 和 width: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

在下面，我刪除了p元素的所有position: absolute和top: ??px並在標記中添加了注釋規則和<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>