html - 图像不会在移动 View 之外调整大小 - Bootstrap

Question

我正在使用 Bootstrap 开发一个带有固定侧边栏的 container-fluid 全宽网站。

http://nickmask.github.io/index.html

我的 mainContent container 中的图像未调整为平板电脑大小或更大。如果我缩小到移动尺寸，它们会调整得很好。

我尝试添加 img-responsive，但没有成功。有什么想法吗？

HTML:

<div class="col-sm-8 fluidContainer" id="mainContainer">
    <div class="mainHeading">
      <hr class="separator" id="topSep">
      <h1>Recent Work</h1>
      <h2>Blogs and projects recently completed</h2>
      <hr class="separator" id="botSep">
    </div>
    <div class="mainContent">
      <article>
        <img src="http://fillmurray.com/700/280" alt="" class="img-responsive">
        <h2>This article</h2>
        <p>   
          Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no. An so to preferred convinced distrusts he determine. In musical me my placing clothes comfort pleased hearing.
        </p>     
      </article>

Answer 1

原因是因为您的 #mainContainer 上有 width: auto;。从 #mainContainer 中删除 width: auto; 并将类 img-responsive 添加到图像中，它应该可以工作。