基础5中的图像打破布局没有被响应地调整大小

Question

摘要
如果宽度小于图像宽度，基础5处理内容图像（与添加到div的背景图像相反）以响应。

我添加了一个具有响应高度的粘性页脚。由于显示的这一添加现在阻止Foundation 5在页面上的最大图像的宽度下方正确地显示页面上的内容。

意图
修改响应式页脚的CSS，使其不会干扰Foundation 5处理图像的方式。

<小时/> 有一个图像打破我的布局，现在文本的文本不受设备宽度的约束。这个问题似乎来自于将内容包装在一个div中，该div被添加为responsive sticky footer。这个类是需要修改的问题。

.container { 
  display: table; 
  height: 100%; 
  width: 100%; 
  margin: 0 auto; 
} 

此时问题已经存在。包裹在其中的标题很好。但我接着将内容放入一个看起来像这个

的div中

<div class="block push">

响应粘性页脚也需要这些类。这些类有这些规则

.block { 
  display: table-row; 
  height: 1px; 
}

.push { 
  height: auto; 
}

这是我的网站正常显示的图像（我注释掉了图像）

但是在图像中，正如您所看到的，文本延伸到图像的长度

这是我目前的HTML

<div class="row">
  <div class="large-12 columns">
    <h1>Bruxzir Testimonials</h1>
    <a href="#Submit-Testimonial" title="Submit Your BruxZir Testimonial" class="button">Click Here to Submit Your BruxZir Testimonial</a>
    <ul id="testimonials">  
      <li>
        <p>&quot;This patient's anterior case came out great. I just wanted to share the before and after photos with you. BruxZir keeps surprising us.&quot;</p>
        <p><img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/testimonial-case/before-after.jpg" alt="bruxzir anterior case" /></p>
        <span class="author">&ndash; Janet S., DDS, Oaklawn, IL</span><br />
        <span>Ceramics by <a href="http://www.pcdl-usa.com/" target="_blank">Precision Ceramics Dental Laboratory</a>, Montclair, CA</span>
      </li>
    </ul>  
  </div>
</div>

在Firefox的检查器中，我测试了传递规则，它在px

中取宽度

但似乎没有以百分比形式对待它们。

不确定我在这里可能缺少什么。我目前在

的演示服务器上有此页面

http://windev.jgallardo.me/pages/testimonials-bruxzir-zirconia-dental-crown/index.aspx

Answer 1

好的，经过一些编辑后我就得到了。如果你删除两个CSS规则，你会有回应。他们是：

显示：

上的表行css规则

div.mainContent {
  display: table-row;
}

和

div.container {
  display: table;
}

删除这两个，然后检查设计如何响应浏览器宽度。