comment montrer des images en série sage dans le système de grille

-2

Dans mon bootstrap j'ai quelques images. Je veux qu'on les montre en série.comment montrer des images en série sage dans le système de grille

Maintenant, il montre comme auto ajusté en hauteur ou colonne, je veux qu'ils soient affichés en ligne.

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

ho pour montrer cette image rangée sage avec une hauteur ajustée, je ne me soucie pas de la colonne que je veux montrer l'image série sage en ligne avec la hauteur ajustée automatique

Source

2017-10-18 Tanmay

version de bootstrap? column-css dessine col by col, pour dessiner row by rows, vous devrez supprimer column-css. Quelle technique avez-vous essayé ou avez-vous l'intention d'utiliser alors? flex? la grille ? autre ? recadrer l'image est une option https://codepen.io/anon/pen/xXmyMw –

Voici mon atempt, définissez la propriété max-height à toutes les images, cela les fera apparaître comme une rangée. S'il vous plaît se référer à mon extrait ci-dessous et laissez-moi savoir si cela résout votre problème!

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

Source

2017-10-18 12:13:10

@Tanmay Cette réponse vous aide-t-elle? –

Si vous permettez Rogner flex et object-fit pourrait aider (i attendait une réponse sur un commentaire)

bootstrap-4 est utilisé pour améliorer le modèle de boîte flex.

HTML mis à jour avec classe: <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>

Source

2017-10-18 12:27:30

comment montrer des images en série sage dans le système de grille

Répondre

Questions connexes