使用bootstrap和CSS使圖像佈局更有條理

所以我基本上使用手動百分比來使這些圖像在一起。正如你所看到的，他們不是非常整齊的佈局或組織。我怎樣才能讓它看起來更加瀟灑？使用bootstrap和CSS使圖像佈局更有條理

下面的代碼：

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; "> 


    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-2"> 
       <img src="./assets/img/glass.jpg" class="img-responsive " style="width:95%"/> 
       <img src="./assets/img/rift.jpg" class="img-responsive m-y-1" style="width:95%;"/> 

      </div> 
      <div class="col-lg-8"> 
       <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; "/> 
      </div> 

      <div class="col-lg-2"> 
       <img src="./assets/img/mindwave.png" class="img-responsive" style="width:120%;"/> 
       <img src="./assets/img/VR.png" class="img-responsive m-y-1" style="width:120%;"/> 

      </div> 
     </div> 
    </div> 



</div>

下面是它的樣子： http://imgur.com/e2I3yLu

而且這裏的鏈接網站： monajalal.github.io

任何建議非常感謝。我想知道是否有更直接的圖像佈局方法或任何自動方法？

來源

2016-06-16 Mona Jalal

您需要生成具有精確寬度和高度的縮略圖，而無論縱橫比如何，您都無法實現有組織的佈局。 –

作爲一種簡單的方法，您可以用精確的寬度和高度以及「溢出：隱藏」的DIV替換圖像，並將圖像放入其中，以便可視化裁剪圖像。 –

試試這個網站，以便輕鬆調整圖片大小：http://images.weserv.nl。使用它也使所有圖像的大小相同。 – JoostS

設置每個圖像作爲一個DIV的背景圖像：

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; "> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-2"> 
       <div style="background: url('./assets/img/glass.jpg'); background-size: cover;" class="img-responsive"></div> 
       <div style="background: url('./assets/img/rift.jpg'); background-size: cover;" class="img-responsive"></div> 
      </div> 
      <div class="col-lg-8"> 
       <div style="background: url('./assets/img/mhacks.jpg'); background-size: cover;" class="img-responsive-large"></div> 
      </div> 
      <div class="col-lg-2"> 
       <div style="background: url('./assets/img/mindwave.png'); background-size: cover;" class="img-responsive"></div> 
       <div style="background: url('./assets/img/VR.png'); background-size: cover;" class="img-responsive"></div> 
      </div> 
     </div> 
    </div> 
</div>

然後設置這個CSS：

.img-responsive {padding-top: 60%; margin-bottom: 10px;} 
.img-responsive-large {height: 208px; margin-bottom: 10px;} 

@media screen and (max-width: 940px) { 
    .img-responsive-large {height: auto; padding-top: 60%;} 
}

來源

2016-06-16 22:47:00 JoostS

這沒有奏效！ https://jsfiddle.net/qjmza9at/ –

對不起...我更新了答案。 – JoostS

你的答案不起作用！你試過了嗎？你可以在jsfiddle中顯示它在工作嗎？ –

嘗試......我所做的是與電網的工作。使用來自列的填充，甚至使用圖像之間的邊距，也可以將圖像設置爲100％寬度。 img-responsive類設置最大寬度爲100％，至少這樣圖像將填充列。

<div class="jumbotron jumbotron-fluid"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-8"> 
        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/> 
       </div> 
       <div class="col-lg-2"> 
        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive "/> 
        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/> 

       </div> 

       <div class="col-lg-2"> 
        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive"/> 
        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="img-responsive m-y-1"/> 

       </div> 
      </div> 
     </div> 
    </div>

刪除內聯樣式 - 而是定位在CSS中的圖像並添加它。

.jumbotron img { width: 100%; margin: 15px 0; }

來源

2016-06-17 00:41:55 Rob

中有代碼不起作用！這就是它將如何顯示http://imgur.com/mtFaxyD –

不確定你想要做什麼或你試圖獲得的效果，而不是編碼修復，爲什麼不嘗試在photoshop中打開你的照片並剪裁它們使它們平等對齊。否則，縱向和橫向圖像將永遠不會正確對齊。 – Rob

使用bootstrap和CSS使圖像佈局更有條理

回答

相關問題