如何在引导模板中使图像响应答案

【问题标题】：how to make images responsive in a bootstrap template如何在引导模板中使图像响应
【发布时间】：2016-02-17 04:37:33
【问题描述】：

我知道这个问题被问了很多，我在发布这个问题之前做了很多研究和尝试，但似乎没有任何效果。我有两个图像和一个文本，我想在一行中显示它们。但是，当我减小窗口大小时，图像会显示在文本的下方和上方，而不是在文本旁边。我有以下代码，这是fiddle：

<div class="row">
   <div class="col-md-4">
     <img src="image.jpg" class="images">
   </div>
   <div class="col-md-4">
     <div class="text">
       <h2 class="featurette-heading">What's Included with HTML?</h2>
          <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p>
    </div>
</div>
  <div class="col-md-4">
    <img src="image.jpg" alt="Chrome Browser" class="images"></div>
</div>

如何让图片根据窗口大小调整大小，使图片和文字都显示在一行中？

我尝试了 width:100%;height auto; 和 max-width:100%; 以及各种组合以使它们响应，但到目前为止没有任何效果。

提前致谢！

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

您可以在 div 上使用类“col-sm-4 col-xs-12”，在图像上使用 img-responsive 类，并在 img 标签上使用样式属性 display:inline-block 以使其居中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-12"">
      <img class="img-responsive"  style="display:inline-block" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" />
    </div>
    <div class="col-sm-4 col-xs-4">
      <div class="text">
        <h2 class="featurette-heading">What's Included with HTML?</h2>

        <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p>
      </div>
    </div>
    <div class="col-sm-4 col-xs-12"">
      <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive"  style="display:inline-block" />
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试替换为 .col-xs-12 在图像 div 中

【讨论】：

【解决方案3】：

您必须在图像中添加.img-responsive 类。这会将max-width: 100%;, height: auto; and display: block; 应用于图像，以便它很好地缩放到父元素。

更多信息： http://getbootstrap.com/css/#images

【讨论】：

【解决方案4】：

您只需将列大小从 md 更改为 xs (col-md-4 : col-xs-4)。

请参阅Docs。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" />
    </div>
    <div class="col-xs-4">
      <div class="text">
        <h2 class="featurette-heading">What's Included with HTML?</h2>

        <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p>
      </div>
    </div>
    <div class="col-xs-4">
      <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" />
    </div>
  </div>
</div>

【讨论】：