Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS
Sources : Bootstrap vertical align responsive images example code, (mon jsFiddle) [Pure CSS attempt] Responsive product list (w/responsive images).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* CSS used here will be applied after bootstrap.css */ .thumbnail_container { position: relative; width: 100%; padding-bottom: 100%; margin-bottom:20px; } .thumbnail { position:absolute; width:100%; height:100%; } .thumbnail img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } img{ max-height:100%; max-width:100%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<div class="container-fluid"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="http://placehold.it/400x600"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="http://placehold.it/600x600"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="http://placehold.it/600x400"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="no-photo"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="http://placehold.it/400x600"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="http://placehold.it/600x600"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="http://placehold.it/600x400"> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail_container"> <div class="thumbnail"> <img src="no-photo"> </div> </div> </div> </div> </div> <div id="push"></div> |
Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery
Un code source à peu près fonctionnel est disponible ici, mais ne se lancera pas au 1er chargement de la page. Il faudra relancer le code en cliquant sur Run.
Cependant, le bout de script suivant a été mis en place avec succès dans un projet Change (v3.6.8) :
L’ajout de $(window).on('load', function(){ ... }); permet aux visuels de s’afficher dans la page avant de lancer le script (car il a besoin de connaître leurs dimensions pour effectuer ses calculs d’alignement).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script change:javascript="head 'themes.husson.js.equalheight'"></script> <script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early // http://devfrontend.info/colonnes-de-meme-hauteur/ $('.product-visual').css({height: 'auto'}).setEqualHeight(); $('.product-label').css({height: 'auto'}).setEqualHeight(); //$('.product-visual').css('height', '100%'); // http://jsfiddle.net/frontenddeveloper/d25oer58/14/ var getContainerHeight, getImageHeight, resizeTimer; function vAlignImage(){ var getContainerHeight = $('.product-visual').height(); $('.product-visual img').each(function(){ var getImageHeight = $(this).height(); $(this).css('padding-top', ((getContainerHeight / 2) - (getImageHeight / 2))); }); } vAlignImage(); }); $(window).on('resize', function(e){ // http://devfrontend.info/colonnes-de-meme-hauteur/ $('.product-visual').css({height: 'auto'}).setEqualHeight(); $('.product-label').css({height: 'auto'}).setEqualHeight(); // http://jsfiddle.net/frontenddeveloper/d25oer58/14/ clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { vAlignImage(); }); }); }); })(jQuery); </script> |