Afficher un logo selon la résolution d'écran du visiteur
Fermé
Drahcirid
Messages postés
1
Date d'inscription
mercredi 13 décembre 2017
Statut
Membre
Dernière intervention
13 décembre 2017
-
13 déc. 2017 à 13:52
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 13 déc. 2017 à 20:58
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 13 déc. 2017 à 20:58
A voir également:
- Afficher un logo selon la résolution d'écran du visiteur
- Double ecran - Guide
- Capture d'écran samsung - Guide
- Ecran noir pc - Guide
- Ecran d'accueil iphone - Guide
- Retourner ecran windows - Guide
1 réponse
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
13 déc. 2017 à 20:58
13 déc. 2017 à 20:58
Bonjour,
Disposes tu des deux fichiers à utiliser ? (les deux logos dans les tailles voulues ? )
Ensuite... nul besoin de javascript pour ça.
Simplement du CSS pour le responsive..en jouant avec les
Par exemple :
Une autre solution (pas testée) serait un truc du genre
Disposes tu des deux fichiers à utiliser ? (les deux logos dans les tailles voulues ? )
Ensuite... nul besoin de javascript pour ça.
Simplement du CSS pour le responsive..en jouant avec les
@media (max-width:
Par exemple :
#main-img {
height: 150px;
width:100%
}
@media screen and (max-width: 767px) {
#main-img{
background-image: url(logosmall.png);
}
}
@media screen and (min-width: 768px) {
#main-img{
background-image: url(logosmall.png);
}
}
@media (min-width: 992px) {
#main-img{
background-image: url(logobig.png);
}
}
@media (min-width: 1200px) {
#main-img{
background-image: url(logobig.png);
}
}
<div class="container">
<div id="main-img" />
</div>
Une autre solution (pas testée) serait un truc du genre
<picture>
<source media="(min-width: 900px)" srcset="BigImage.png">
<source media="(min-width: 480px)" srcset="MediumImage.png">
<img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>
