Images réactives de Bootstrap
En utilisant Twitter Bootstrap, je réalise que par défaut, les images sont redimensionnées en conséquence. C'est génial, mais ce n'est pas toujours parfait.
Supposons par exemple que j'ai une image 500x300 sur le bureau, puis qu'elle redimensionne pour mobile cette image va être vraiment petite et pas très grande, perdant ainsi une grande partie des détails.
J'ai vu comment d'autres sites n'agrandissaient pas beaucoup l'image, mais utilisaient plutôt la division parent pour trier mask l'image. ( http://www.fitnessfireworks.com était un excellent exemple de cela, n'est plus disponible.)
Quelle est la meilleure méthode pour y parvenir? Une combinaison de CSS image de fond et mise à l'échelle de l'image de fond? Je cherche juste les meilleures pratiques.
J'ai vu comment d'autres sites n'agrandissaient pas beaucoup l'image, mais utilisaient plutôt la div mère pour trier l'image.
Si vous examinez la CSS sur la page que vous avez mentionnée, vous verrez que plutôt que d'utiliser des images imline, ils définissent généralement des div avec des images d'arrière-plan et utilisent CSS comme
#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}
Voici un exemple de la façon dont vous pouvez obtenir des résultats complètement différents avec la mise à l'échelle d'une image en ligne par rapport à background-image.
La clé de la seconde méthode consiste à utiliser background-size: cover et à manipuler la taille de la div (et donc la taille de l'image d'arrière-plan).
http://css-tricks.com/perfect-full-page-background-image/ a de bonnes informations sur les variantes et les options avec background-cover.
Vous pouvez trouver this article utile. Il explique comment optimiser les images pour un affichage réactif et éviter plusieurs téléchargements d'images.
Si la qualité d'image est importante, j'utiliserais deux images en utilisant une déclaration de classe différente. Les outils externes permettent toujours de mieux redimensionner les images que le navigateur ne le fait à la volée.