I’m having trouble setting up the Thumbnail module for my personal website. I use twitter bootstrap (3.0) for my project and I can’t finish setting up the Thumbnail module.
The width is okay, but I can’t set the height of thumbnails (I can’t align all thumbnails as the same height).
How I can set one (standard) height for all the thumbnails and zoom/scale image to center so they can fill all space without stretching the image?
<div class="row">
<!-- Thumbnail 0 -->
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img.png" alt="...">
</a>
<div class="caption">
<h4>Arctic MX-2, 8g</h4>
</div>
</div><!-- /thumbnail 0 -->
<!-- Thumbnail 1 -->
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="blue.png" alt="...">
</a>
<div class="caption">
<h4>Arctic MX-2, 8g</h4>
</div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->
either in css:
.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire
or inline:
<img src="img.png" alt="..." style="min-height:50px;height:50px;" />
Hey I was looking at your question, cause I have had the same problem in Bootstrap where if one of the <div>
's height is higher than the other's, then the grid doesn't display properly. I figured out how to fix the thumbnail align problem, and I think many people could be using the CSS Flex property.
In the div class="row"
I added style="display:flex; flex-wrap: wrap;"
. Basically, my code looks like this:
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-3">
<div class="thumbnail">
<img src="http://lorempixel.com/500/300" style="width:200px">
<div class="caption">
<h4>Some thumbnail heading</h4>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="http://lorempixel.com/500/300" style="width:200px">
<div class="caption">
<h4>Some thumbnail heading</h4>
</div>
</div>
</div>
.. any number of thumbnails you want
</div>
So you can have different thumbnail heights and it will display properly, maybe not as jQuery Masonry, but at least better.
With SCSS, you can simply:
@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }}
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }}
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With