web-dev-qa-db-fra.com

Taille de l’image différente pour lg, md sm et xs

Je dois faire en sorte qu'une image change de taille si le spectateur a un smartphone ou un PC. Cela permet d'obtenir ce que je veux, mais c'est une mauvaise façon de le faire car le chargement de l'img a été effectué 4 fois, ce qui est redondant:

<div class="col-md-4 text-center">
    <img class="hidden-md hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="250" height="250" />
    <img class="hidden-lg hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="200" height="200" />
    <img class="hidden-lg hidden-md hidden-xs" src="~/Content/Images/masinaC.png" width="150" height="150" />
    <img class="hidden-lg hidden-md hidden-sm" src="~/Content/Images/masinaC.png" width="100" height="100" />
</div>

Il affiche une seule image à la fois et seule la taille diffère. Comment y parvenir sans ce vilain balisage? Peut-être avec CSS, je mets les tailles d'image en HTML juste pour la simplicité.

htmlcssresponsive-designtwitter-bootstrap-3
7
Mateo Velenik

Il existe plusieurs solutions à cela, en fonction des résultats recherchés. Essayez le comportement de JSFiddle en redimensionnant la cellule du résultat.

1. Utiliser le pourcentage de largeur

Vous pouvez définir un pourcentage de largeur pour l’image afin qu’elle s’adapte en fonction de la taille de l’écran. Cette solution peut augmenter la taille de l'image si le pourcentage est supérieur à la largeur d'origine, par exemple si l'image mesure 250 pixels de large et que vous utilisez width: 50% et que la largeur de l'écran est de 600 pixels, l'image sera redimensionnée jusqu'à une largeur de 300 pixels. .

Voir JSFiddle .

1.1 Utilisation du pourcentage de largeur, avec parent de largeur fixe

Si vous souhaitez utiliser la solution précédente mais ne souhaitez pas que l'image soit redimensionnée à une taille supérieure à la taille d'origine, vous pouvez définir un parent avec max-width.

Voir JSFiddle .

2. Utilisation des points d'arrêt

Utilisation de requêtes de support CSS3 pour modifier la taille de l'image en fonction de la largeur de l'écran.

Voir JSFiddle .

Vous pouvez en savoir plus sur les requêtes de médias et les CSS réactifs ici .

Si vous ne souhaitez pas utiliser des tailles de requête multimédia personnalisées et souhaitez vous en tenir aux points d'arrêt spécifiques à Bootstrap, votre code CSS doit être:

/* xs */
img {
    width: 100px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    img {
        width: 150px;
    }
}
/* md */
@media (min-width: 992px) {
    img {
        width: 200px;
    }
}
/* lg */
@media (min-width: 1200px) {
    img {
        width: 250px;
    }
}

Voir JSFiddle . Ces tailles sont documentées ici . xs est la valeur par défaut car Bootstrap 3 utilise une approche mobile-first .

17
Filly

Plutôt que de spécifier toutes les conditions dans lesquelles une image est masquée, il est préférable de spécifier quand elle est visible:

<div class="col-md-4 text-center">
<img class="visible-lg" src="~/Content/Images/masinaC.png" width="250" height="250" />
<img class="visible-md" src="~/Content/Images/masinaC.png" width="200" height="200" />
<img class="visible-sm" src="~/Content/Images/masinaC.png" width="150" height="150" />
<img class="visible-xs" src="~/Content/Images/masinaC.png" width="100" height="100" />

Le navigateur n'affichera l'image pertinente qu'à la taille de la fenêtre, vous évitant ainsi de vous perdre dans les requêtes multimédia.

4
Marodo
img {
  width: 100%;
}

Cela rendra l'image à 100% de son parent. Cela changera l'image en conséquence. Donc, si le parent est col-md-4, il prendra toute la div. Alors tu pourrais faire 

<div class="col-md-4 col-sm-4 col-xs-4">

  <img src="where ever the image is" alt="what ever">

</div>

Cette image dans cette division changera par rapport aux classes de classe si img est défini sur 100%. Si vous ne voulez pas que l’image occupe toute la largeur, réglez-la en conséquence à 75%, 50%, etc.

3
jhamPac

Voici un exemple utilisant le <picture> element et les points d'arrêt sensibles de de Bootstrap 4 :

<picture>
  <source media="(min-width: 1200px)" srcset="/images/xl.png">
  <source  media="(min-width: 992px)" srcset="/images/lg.png">
  <source  media="(min-width: 768px)" srcset="/images/md.png">
  <source  media="(min-width: 576px)" srcset="/images/sm.png">
  <source  media="(max-width: 575px)" srcset="/images/xs.png">
  <img src="/images/default.png" alt="Example Text" style="width:auto;" >
</picture>

En utilisant cela, les navigateurs chargeront la seule image correcte en fonction de la largeur de l'appareil. Pour les navigateurs plus anciens, ils chargeront simplement l'élément <img> par défaut.

2
tyler.frankenstein

HTML5 a un nouveau tag <picture>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

aussi, boostrap 4 supporte <picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
1
ram

Je suis aussi un débutant, mais plutôt que tous les codes complexes ci-dessus, ce code simple corrige mon problème. 

#logo img {
    max-height: 100%; 
    max-height: 50vh; //50% of user's viewport height
}

Si vous souhaitez apporter des modifications à width , essayez ceci:

#logo img {
        max-width: 100%; 
        max-width: 50vw; //50% of user's viewport width
    }

J'espère que cela aidera aussi les autres. 

0
ofarukcaki