浮动重叠文本重叠图像

Question

在图片上，当屏幕宽度小于1400像素左右时，我可以看到文本与图像重叠的问题。

这是我的HTML。

<article>
<img src="images/welkomartikel2.jpg" />
</article>
<aside>
<h2>Welkom</h2>
<p>The Text that overlaps</p>
</aside>

这是CSS：

article {
    float: left;
    width: 50%;
    margin: 0 auto;
    height: auto;
    padding: 4%;}

aside {
    float: right;
    margin: 0 auto;
    width: 35%;
    height: auto;
    padding: 3%;}

Overlaping text on my picture

Answer 1

您将这两个元素相邻，以便它们永远不会重叠，但问题是您没有代码控制图像本身的行为方式。您需要做的是确保图像永远不会逃脱其父级的边界：

article img {
  max-width: 100%;
  max-height: 100%;
}

希望这有帮助！ ：）