在引導程序中調整大小后，圖像會留在同一行嗎？

Question

我在面板主體內添加了11張圖像，並使它們與CSS保持一致：.img-sensitive {display：inline-block;}到目前為止，一切都很好。 調整頁面大小后，他們將一目了然，這不是我的目標。 我希望他們在頁面升起后留在同一行。 這可能與圖像大小有關。

如果有人可以告訴我即使調整大小后如何調整圖像大小以保持在同一行中，那還是很棒的！

這是代碼：

.img-responsive {
  display: inline-block;
}

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
      <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
    </div>
  </div>
</div>

Answer 1

默認情況下，所有響應img的操作如下：

display: block;
max-width: 100%;
height: auto;

這樣可以確保圖像永遠不會比父圖像寬，並且比例保持不變。

為了確保所有圖像都在同一行上，您添加了行內塊，但這僅允許圖像出現在同一行上，並且不會限制其大小。 為了確保所有11張圖像都保持同一行，您將必須執行以下操作：

max-width: calc(100%/11);

這樣可以確保每個圖像最大為父圖像寬度的1/11。

要考慮的另一件事是，對於內聯項，空格是相關的。 11張圖片+空格將超過父級的100％，因此您必須確保html中的img標簽之間沒有空格。

看看我設置的演示： http : //www.bootply.com/46tTVHAtYG

Answer 2

除了Pevara的解決方案外，還有許多解決方案：

使用視口單位

對於媒體查詢，您可以根據視口寬度分配圖像寬度。 根據您的喜好調整單位。

 .img-responsive { display: inline-block !important; /* important added for SO snippet -- Avoid it! */ } @media (max-width: 768px) { .panel-body img { width: 2vw; height: 2vw; } } @media (min-width: 768px) and (max-width: 991px) { .panel-body img { width: 3vw; height: 3vw; } } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-xs-8 col-sm-6 col-lg-8"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">My images</h3> </div> <div class="panel-body"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> </div> </div> </div> 

---

使用Flexbox

將flex容器設置為圖像的父級。 flex-flow默認值為row nowrap因此它將防止出現新的圖像行。

 .panel-body { display: flex; justify-content: space-between; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-xs-8 col-sm-6 col-lg-8"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">My images</h3> </div> <div class="panel-body"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> <img class="img-responsive" src="http://placehold.it/30x30" alt="Responsive image"> </div> </div> </div> 

Answer 3

每個圖像都需要一個可以調整大小的容器。

嘗試像：

#img_container li {
  width: 33.3%;
  float: left;
}
.img-responsive{
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

<div class="col-xs-8 col-sm-6 col-lg-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">My images</h3>
    </div>
    <div class="panel-body">
      <ul id="img_container">
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
        <li>
          <img class="img-responsive" src="img/other/asd.png" alt="Responsive image">
        </li>
      </ul>
    </div>
  </div>
</div>