Le Hollandais Volant

Suite de ça : http://lehollandaisvolant.net/?mode=links&id=20130718014626

Mon astuce avait un problème : si on utilisait une petite image, elle était agrandie pour faire 100% du cadre. Pas pratique si notre image est une icône 32×32px.

Le code qui suit résout ce bug (au prix d’un bloc HTML supplémentaire). L’image :
– conserve toujours un ratio de 1:1 ;
– empêche l’image de dépasser verticalement ;
– empêche l’image de dépasser horizontalement ;
– empêche l’image d’être sur-redimensionnée ;
– toujours sans Javascript.

<div id="d1">
  <div>
    <img src="image.jpg"/>
  </div>
</div>


Et le CSS :

#d1 {/* dans le cas d’une lightbox, j’ai ça : c’est pour pas que ça dépasse de l’écran*/
   position: fixed;
   top: 5%; right: 5%; bottom: 5%; left: 5%;
}

#d1 div img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

#d1 div {
   width: 100%;
   height: 100%;
   display: inline-block; /* lui il est important */
}

Voilà ce que ça donne : http://lehollandaisvolant.net/img/css-image-resize.jpg

Seule faille ici : le bloc principal doit être en positionnement absolue, et ne pas dépasser de l’écran. L’image s’adapte en fait au bloc principal, tout en ne sur-zoomant jamais.