图片未在移动视图之外调整大小 - 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

在bootstrapcssmax-width: 100%;。你改变 width: 100%; 和相同的高度。设置宽度和高度。

Answer 2

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

图片未在移动视图之外调整大小 - Bootstrap

Images are not resizing outside of mobile view - Bootstrap

html

css

image-scaling

twitter-bootstrap