Le changement d'Image en fonction de Mobile ou de Bureau HTML & CSS

Donc im essayant de changer l'image en fonction de si l'utilisateur est sur le mobile ou la version de bureau.

J'ai deux images différentes, l'une avec un "m" à la fin est une mini-version pour ordinateur de bureau, et l'autre est mobile. Je ne peux pas obtenir que cela fonctionne bien.

Voici un code:

HTML (à l'Aide d'un Rasoir, d'une sorte de code C# travaux):

<img id="ifMobile1" src="images/arts/IMG_1447m.png" alt="">

CSS:

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
    }
}

M'aider s'il vous plaît.

Avez-vous testé sur un appareil mobile? Si ce qui est à l'échelle de la résolution de l'appareil? Je sais que mon S5 est 3x
Oui je l'ai testé sur un appareil mobile, le reste de mon code CSS fonctionne donc c'est bien.

InformationsquelleAutor Andre Korosh Kordasti | 2015-03-10

c#css html model-view-controller razor

1

Un autre truc serait d'avoir deux balises img, et se cacher l'un en fonction de l'appareil.

HTML
```
<img id="img1" src="images/arts/IMG_1447.png" alt="">
<img id="img2" src="images/arts/IMG_1447m.png" alt="">
```
CSS
```
#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}
```
- Afficher aucun ne pas empêcher le navigateur de chargement de l'image encore. C'est en fait pire que les deux images sont la charge sur tous les appareils.
InformationsquelleAutor WebbySmart
5

Si vous voulez vivre dans le futur, la <picture> élément est le chemin à parcourir. Il a encore vraiment de la mauvaise prise en charge du navigateur (seulement clignoter en fonction des navigateurs, firefox bêta dès à présent). La bonne nouvelle, c'est qu'il revient à un muet <img> tag, donc pas de mal à cela, sauf un peu plus lent chargement si il n'est pas pris en charge.

Bon, alors comment ça fonctionne?

Plus de cet exemple est tiré de html5rocks avec quelques modifications

Un élément de l'image ressemble à ceci:
```
<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>
```
Essayez l'exemple pour vous-même à http://googlechrome.github.io/samples/picture-element/, il suffit de redimensionner la largeur du navigateur pour voir le chaton changement.

La chose cool à propos de l'élément de l'image, c'est qu'il vous permet de spécifier des requêtes de média à chacun des <source> éléments. La dernière <img> est affiché si aucune source est validée, ou si l'élément de l'image est pris en charge.
- Ahh l'avenir... génial.
- Oui, l'image de l'élément a de moins en moins de soutien que srcset, mais je ne le vois pas comme srcset la version 2. Ils "sorte de" faire la même chose, mais de manière différente. srcset est mieux si c'est la même image avec différentes résolutions - le navigateur peut alors décider lui-même quelle est l'image à charger en fonction de la résolution, la densité de pixel, et probablement de la vitesse du réseau à l'avenir. L'élément de l'image de l'autre main vous décidez de le images. Cela peut être bon ou mauvais. Si vous voulez une image différente sur des appareils plus petits, c'est le chemin à parcourir.
- Oh merci pour l'info! J'ai pensé que l'élément de l'image est la chose qui allait rester. Ne sais si l'un d'eux est sur le départ?
- Non, je pense qu'ils sont tous les deux là pour rester 🙂 Il y a des parties de ces normes n'est pas encore implémenté dans les navigateurs, mais ce sera génial quand nous pouvons l'utiliser au mieux.
InformationsquelleAutor Henrik Karlsson
0

Mise à jour: Veuillez jeter un oeil à http://jsfiddle.net/p96denv4/2/

Voici ce que vous feriez.

HTML
```
<div id="ifMobile1"></div>
```
CSS
```
#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
    width: set your width  ;
    height: set your height  ;
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
        width: set your width  ;
        height: set your height  ;
    }
}
```
- Qui dit pas de travail, l'élément div ne montrer aucune image...
- Essayez display: block et aussi assurez-vous qu'il est pointé vers le droit chemin de votre image. Est votre feuille de style dans votre racine principale?
- les divs sont déjà des éléments de bloc
- Veuillez voir mon JSFIDDLE - jsfiddle.net/p96denv4/2 Votre image d'arrière-plan doit être visible. Je ne pense pas que vous pouvez vraiment utiliser la balise img pour changer la source de l'image pour téléphone mobile à ce jour et l'âge. Grâce à la prise en charge du navigateur.
InformationsquelleAutor WebbySmart
-1

vous ne pouvez pas modifier une source de l'image comme ça. Vous aurez besoin d'utiliser un div avec l'original comme une image d'arrière-plan pour que cela fonctionne.
```
<div id="ifMobile1" style="background-image: url(images/arts/IMG_1447m.png);"></div>
```
- Oui, vous pouvez....
- Et que dire de la CSS?
- lol @Jackhardcastle vraiment?? vous pensez que vous pouvez modifier une source de l'image avec du css? vous avez en bas voté de ma réponse, et vous n'avez aucune idée de quoi vous parlez?
- Qui n'a pas de travail, elle doit être un élément img, la div ne pas montrer quoi que ce soit.
- Utilisation de l'original de votre css avec la hauteur et la largeur de l'image appliquée.
- Oui, je crois que @Aaron
- avez-vous un exemple de travail de cette magie vous parler de @Jackhardcastle
- Je ne crois pas... CAR IL n'EST PAS POSSIBLE!
- J'étais au téléphone avec ma banque. Se tenir.
- href="http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/" >smashingmagazine.com/2013/07/22/...
- wow @Jackhardcastle, l'une des options ici les cuirs et les affiche 2 images différentes? nulle part, sur l'exemple de la page que vous avez fournies faut-il changer la source d'une image?? Comme je l'ai dit à l'origine, vous n'avez aucune idée de quoi vous parlez.
- La majorité de cet article est de parler de changement d'image de fond comme ma suggestion ci-dessus (Que vous vers le bas voté!)
- Je n'ai jamais downvoted il. Bien sûr, vous pouvez répliquer background-image comme un sélecteur CSS comme vous pouvez le faire avec la couleur d'arrière-plan, arrière-plan, ... je n'ai aucune idée de quoi je parle, mais je n'entrerai pas dans mon métier, parce que ce n'est pas le lieu. :^)
- stackoverflow.com/questions/9506069/... @Aaron
- vous êtes le point est toujours totalement invalide, vous ne pouvez pas échanger la source d'une balise d'image.
- Lors de mon temps de commenter @Aaron, cette modification n'a pas été faite à son exemple.
- Et oui, vous pouvez, pas avec barebone CSS, mais vous pouvez.
- img { content:url(example.com/image.png); } Par exemple, ajouter ceci dans votre media queries.
- super si vous êtes seulement à la recherche sur le site dans google chrome?
- testé le feu IE11 et FF et fonctionne pour les deux.
InformationsquelleAutor Aaron
-1
```
img#id {
    content:url(http://example.com/image.png);
}
```
cela peut être utile pour vous, de définir chacun de vos images dans les médias respectifs des requêtes.
- Ce n'est pas utilisable sur tous les navigateurs. IE, Firefox va échouer comme contenu:url() n'est pas pris en charge
- Testé dans firefox version 36.0.1 et rien ne montre? jsfiddle.net/3BRN7/406
InformationsquelleAutor Jack hardcastle

Vous devez vous connecter pour publier un commentaire.

Bon, alors comment ça fonctionne?