骷髅CSS列重叠

Question

我试图将两个图像的形式旁边，并使其反应使用的骨架CSS：

<div class="row"> 
     <div class="five columns"> 
      <form id="sign-up-form"> 
       <div class="row"> 
        <label for="signUpUsernameInput">Username</label> 
        <div class="input-wrapper"> 
         <img src="/images/icons/user.png"> 
         <input type="text" name="username" class="u-full-width" id="signUpUsernameInput"> 
        </div> 
       </div> 
       <div class="row"> 
        <label for="signUpEmailInput">Email</label> 
        <div class="input-wrapper"> 
         <img src="/images/icons/mail.png"> 
         <input type="text" name="email" class="u-full-width" id="signUpEmailInput"> 
        </div> 
       </div> 
       <div class="row"> 
        <label for="signUpPasswordInput">Password</label> 
        <div class="input-wrapper"> 
         <img src="/images/icons/password.png"> 
         <input type="password" name="password" class="u-full-width" id="signUpPasswordInput"> 
        </div> 
       </div> 
       <label id="agree-terms"> 
        <div class="row"> 
         <input type="checkbox"> 
         <span class="label-body">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></span> 
        </div> 
       </label> 
       <div class="row"> 
        <button id="sign-up-button-green-large" class="u-full-width">Sign Up</button> 
       </div> 
      </form> 
     </div> 
     <div class="seven columns"> 
      <div class="row"> 
       <div class="six columns"> 
        <img src="/images/box.png"> 
       </div> 
       <div class="six columns"> 
        <img src="/images/box.png"> 
       </div> 
      </div> 
     </div> 
    </div> 

这是它看起来像一个普通的桌面100％缩放：

，然后当我在某一点缩小的操作箱重叠：

的箱子也得到了DIV外推：

，最终他们通常崩溃： 的jsfiddle：https://jsfiddle.net/473vac9x/2/

如何让我的箱子不重叠，被推股利外，当我调整浏览器？非常感谢！

Answer 1

您可以通过以下两种方式之一解决这个问题。

您可以添加类：“U-MAX全宽”的相似图片：

<img class="u-max-full-width" src="path/to/image/here" /> 

或者你可以在样式表中定义图像MAX-，象这样：

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