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

Question

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

<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%; 以及各种组合，以使其具有响应性，但到目前为止没有任何效果。

提前致谢！

Answer 1

您只需要将列大小从md更改为xs（col-md-4：col-xs-4）。

请参阅文档 。

 <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> 

Answer 2

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

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

Answer 3

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

Answer 4

您可以在div上使用“ col-sm-4 col-xs-12”类，在图像上使用img响应类，并在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>