如何在自舉模板中使圖像響應

我知道這已經被問了很多，在發佈這個問題之前我做了很多研究並嘗試了很多，但似乎沒有任何效果。我有兩個圖像和一個文本，我想在一行中顯示。但是，當我減小窗口大小時，圖像顯示在文本的下方和上方，而不是旁邊。我有以下的代碼，這裏是一個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%;以及各種組合，以使它們響應，但它迄今爲止沒有任何工作。

在此先感謝！

來源

2015-11-16 Tom

您只需要將列大小從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>

來源

2015-11-16 06:05:10 vanburen

您必須添加.img-responsive類的形象。這適用於max-width: 100%;, height: auto; and display: block;的圖像，以便它很好地縮放到父元素。

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

來源

2015-11-16 06:06:07 cweitat

嘗試在圖像DIV與 .col-xs-12 更換

來源

2015-11-16 06:08:08

您可以使用類「COL-SM-4 COL-XS-12」的股利和IMG響應圖像類和風格屬性顯示：inline-block在img標籤上以保持中心。

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

來源

2015-11-16 08:30:06 Nikita

如何在自舉模板中使圖像響應

回答

相關問題