Bootstrap Responsive Images De Mise À L'Échelle

À l'aide de Twitter Bootstrap je me rends compte que, par défaut, il met à l'échelle les images de réactivité. C'est super, mais n'est pas toujours parfaite.

Dire par exemple j'ai un 500x300 image sur le bureau, puis il redimensionne pour mobile que l'image va être vraiment petit et pas très haut, de perdre beaucoup de parties détaillées de l'image.

J'ai vu comment les autres sites n'ont pas réellement l'échelle de l'image de beaucoup de, mais plutôt d'utiliser la div parent de faire en sorte de mask l'image. (http://www.fitnessfireworks.com a été un grand exemple de ceci, n'est plus disponible.)

Quelle est la meilleure méthode pour accomplir cette? Une combinaison de CSS background-image et l'image de fond d'échelle? Tout simplement à la recherche pour les meilleures pratiques.

OriginalL'auteur Nic Hubbard | 2013-07-10

  1. 15

    J'ai vu comment les autres sites n'ont pas réellement l'échelle de l'image de beaucoup de, mais plutôt d'utiliser la div parent de faire en sorte de masquer l'image

    Si vous examinez le CSS sur la page que vous mentionnez, vous verrez que, plutôt que d'utiliser imline images, ils sont généralement à la définition des divs avec des images de fond, et à l'aide de 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 comment vous pouvez obtenir des résultats complètement différents avec mise à l'échelle de l'image en ligne vs background-image.

    http://www.bootply.com/67094

    La clé de la deuxième méthode consiste à utiliser background-size:cover et manipuler la taille de la div (et donc la taille de l'image de fond d'écran).

    http://css-tricks.com/perfect-full-page-background-image/ a de bonnes infos sur les variations et les options avec background-cover.

    OriginalL'auteur David Taiaroa

  2. 1

    Vous pouvez trouver cette article utile. Il explique à propos de l'optimisation des images pour une meilleure réactivité et d'éviter des images de multiples téléchargements

    OriginalL'auteur Zim

  3. 0

    Si la qualité de l'image est important, je voudrais utiliser deux images à l'aide de différents déclaration de classe. Des outils externes sera toujours mieux de passer de l'échelle des images que le navigateur de le faire à la volée.

    Oui, la qualité est. J'ai également l'intention d'utiliser 2x images de sorte qu'elles semblent agréable sur le bureau de la rétine écrans.

    OriginalL'auteur Diodeus - James MacFarlane