Container réactif, mais les images ne prennent pas la largeur

Question

pleine Je cherche à recréer l'effet ici sur les images 2 et 3: http://www.jessicahische.is/illustrating/penguinsinbathingsuits

Ces images ont évidemment « padding » rempli déjà par l'image elle-même, mais je me demandais si cet effet est possible avec juste jQuery et CSS?

Toute aide ou aperçu serait formidable, merci!

Answer 1

Une méthode simple pour centrer des articles. Essayez quelque chose comme ceci:

.box { 
    display: block; 
    height: 500px; 
    width: 500px; 
    background-color: #eee; 
    margin:0; 
    padding:0; 
    vertical-align:center; 
} 


.center_item { 
    display: block; 
    height: 100px; 
    width: 100px; 
    background-color: #aaa; 
    margin:0 auto; 
    padding:0; 
} 

Et le code HTML correspondant.

<div class="box"> 
    <div class="center_item">Put your image here.</div> 
</div> 

Ce que cela fait est simplement de mettre un conteneur autour de ce que vous avez besoin d'être centré. En utilisant la marge: 0 auto; vous pouvez centrer n'importe quel élément de son parent. J'espère que c'est ce que vous cherchiez.

Answer 2

jsBin demo

Dans cet exemple, nous utilisons text-align:center; pour notre élément #gallery et de force l'image à la hauteur 100%. Avec jQuery nous vérifions cette image sur .load() pour voir si la largeur de l'image dépasse la largeur de la galerie. Dans ce cas, nous allons changer la largeur et l'alignement vertical du centre avec jQuery. Par exemple:

CSS:

#gallery{ 
    position:relative; 
    margin:0 auto; 
    width:600px; 
    height:500px; 
    border:1px solid #aaa; 
    text-align:center; 
    } 
    #gallery img{ 
    height:100%; 
    } 

jQuery:

$('#gallery img').load(function(){ 

    img = $(this); 
    imgW = img.width(); 

    if(imgW > $('#gallery').width()){ 
    img.css({width:'100%', height:'auto'}); 
    img.css({marginTop: $('#gallery').height()/2 - $(this).height()/2 }); 
    } 

}); 

Jouez avec les largeurs des images/hauteurs pour voir comment ils réagissent.