如何在圖像上獲取文字，並且具有響應能力？

Question

我的圖片上有文字，但沒有反應。 縮放后，文本將覆蓋其他文本。

這是我的CSS

#laatstenieuws > img{
position: relative;
width: 100%;
height: 38.4em;
float: left;
}

#laatstenieuws{
width: 50%;
float: left; 

}

#tekstnieuws{
position: absolute;
z-index: 100;

}

#tekstnieuws > h2{
color: black;
text-align: center;
padding-top: 4em;


}

#tekstnieuws > h3{
font-size: 20px;
text-align: center;
padding-top: 5em;
padding-left: 1em;

}

#tekstnieuws > p{
text-align: center;
padding-top: 3em;
padding-left: 2em;

}

有誰知道如何制作可擴展的？

Answer 1

好吧，我認為它的固定部分。 https://jsfiddle.net/8n743xpL/1/

<div id="blogblokken" style="float: right;">

Answer 2

我不是100％知道你要干什么，但對我來說，這似乎是消除position: absolute; 來自#tekstnieuws修復了。

如果沒有，您應該在JSFiddle中向圖像URL添加一個絕對鏈接，以便我們可以看到圖像。

您還可以從HTML中刪除圖像並將其作為背景圖像添加到div中，從而從中受益。