텍스트가 겹쳐서 움직이는 수레 이미지가 겹쳐진 수레

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

희망이 있습니다. :)