如何在網格系統中顯示串行明智的圖像

-2

在我的引導中，我有一些圖像。我希望他們顯示串行明智的行。如何在網格系統中顯示串行明智的圖像

現在它顯示爲自動調整高度明智或列明智，我希望他們顯示爲行明智。

.gal { 
 
    -webkit-column-count: 3; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; 
 
    /* Firefox */ 
 
    column-count: 3; 
 
} 
 

 
.gal img { 
 
    width: 100%; 
 
    padding: 7px 0; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .gal { 
 
    -webkit-column-count: 1; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; 
 
    /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<div class="container"> 
 
    <h1>Pure Css Responsive Masonry Gallery</h1> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <hr> 
 
     <div class="gal"> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

浩顯示此圖像排明智的調整高度，我真的不關心的專欄中，我要顯示的圖像序列，逐排，自動調節高度

來源

2017-10-18 Tanmay

其引導的版本？ column-css按col繪製col，逐行繪製，你將不得不放棄column-css。您嘗試過哪些技術？或者您打算使用哪種技術？柔性？網格？別的？將裁剪圖像是一個選項https://codepen.io/anon/pen/xXmyMw –

這是我的嘗試，將max-height屬性設置爲所有圖像，這將使它們顯示爲一排。請參閱下面的代碼段，讓我知道這是否解決了您的問題！

.gal { 
 
    -webkit-column-count: 3; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; 
 
    /* Firefox */ 
 
    column-count: 3; 
 
    text-align:center; 
 
} 
 

 
.gal img { 
 
    width: auto; 
 
    height:100%; 
 
    max-height:300px; 
 
    padding: 7px 0; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .gal { 
 
    -webkit-column-count: 1; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 1; 
 
    /* Firefox */ 
 
    column-count: 1; 
 
    } 
 
}

<div class="container"> 
 
    <h1>Pure Css Responsive Masonry Gallery</h1> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <hr> 
 
     <div class="gal"> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-18 12:13:10

@Tanmay這個答案對你有幫助嗎？ –

如果允許裁剪圖像flex和object-fit可能有助於（我等着在評論回覆）

引導-4是用來增強柔性盒模型。

HTML與類更新：<div class="gal d-flex flex-wrap">

img { 
 
    max-width: 30%; 
 
    margin: 0.5vw 0.5vw; 
 
    object-fit: cover; 
 
} 
 

 
/* to show full image, don't crop it */ 
 
img:hover { 
 
    object-fit: contain; 
 
    background:#333 
 
} 
 

 
/* demo purpose*/ 
 
/* reset cropping area */ 
 

 
img:nth-child(2n){ 
 
    object-position:0 50% ; 
 
} 
 
img:nth-child(3n){ 
 
    object-position:0 0; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <h1>Not real Pure Css Responsive Masonry Gallery</h1> 
 
    <h2>hover image to see full image resized where needed </h2> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <hr> 
 
     <div class="gal d-flex flex-wrap"> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""> 
 
     <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-18 12:27:30

如何在網格系統中顯示串行明智的圖像

回答

相關問題