css - How to align rows of images of different heights? -


i'm using bootstrap css. have handlebars loop, place many images side side:

<div class="row">     {{#each imagedata}}     <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 center">         <img src="{{url}}">         <p>{{title}}</p>     </div>     {{/each}} </div>  

unfortunately, of images of different dimensions. set following css:

img { max-width: 100%; max-height: 400px; }

but rows have expected number of images, others have fewer number (depending on number of images same height etc).

what css should apply expected number of images on each row ?

define height div , apply max-height images:

.row > div{   width: 200px;/*example only*/   height: 300px;/*example only*/ } .row > div img{   max-height: 100%; } 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -