1485 sujets

Web Mobile et responsive web design

[résolu] Changer d'image en fonction de la taille d'écran

Bonjour,
J'ai une petite question qui m'a l'air toute simple mais sur laquelle je bloque... vous allez me dire Smiley smile

Je suis en train de faire un site internet (une galerie photo) assez simple. Il s'agit d'une barre latérale à gauche avec un logo et les titres des différentes sections.
Sur smartphone cette barre latérale passe en haut avec le logo et un bouton qui affiche les sections.

Voici mon problème:
Sur un laptop, le logo png de base est simplement le nom et prénom de la personne sur deux lignes.
J'aimerais que sur smartphone le nom et le prénom soit sur une seule ligne pour éviter que le bandeau soit trop large. (j'ai mis une image pour expliquer au cas où).
upload/46814-Sanstitre-.jpg

Donc j'aimerais pouvoir définir quelle logo afficher en fonction de l'écran de l'utilisateur.
Pour l'instant c'est simplement comme ca:
	<div class="logo">
	<a href="index.html"><img src="img/logo.png" title="Nom Prénom" alt=""/></a>
		</div>


Je me demandais s'il n'y avait pas un moyen de définir le lien (src) dans le css du genre:
Dans le html on dit qu'il y a une image à un endroit.
Dans le css on dit (avec un @media)
- si écran laptop: afficher logo.png
- si écran smartphone: afficher logo1.png

C'est la solution que je vois si vous en avez d'autre plus simple je suis aussi preneur.

Merci bien Smiley smile
Modifié par cedmars (13 Nov 2015 - 03:27)
cedmars a écrit :
Je me demandais s'il n'y avait pas un moyen de définir le lien (src) dans le css du genre:
Dans le html on dit qu'il y a une image à un endroit.
Dans le css on dit (avec un @media)
- si écran laptop: afficher logo.png
- si écran smartphone: afficher logo1.png

Bonjour. C'est tout à fait possible, à ceci prêt qu'il ne faut plutôt dire : "Dans le html on dit qu'il y a une div.logo à un endroit. Dans le css on applique une image sur cette div via la propriété background-image".

Ce qui donnerait à peut prêt ceci :
.logo {
  background-image: url(img/logo);
}

@media (min-width: 50em) {
  .logo {
    background-image: url(img/logo1);
  }
}

Un exemple en ligne avec la propriété background-color.
Modifié par Olivier C (13 Nov 2015 - 07:02)
Bonjour,

+1 pour la réponse d'Olivier (les mediaqueries)

Mais, j'ai une question, pourquoi gérer de manière aussi compliquée (dans une image), l'affichage d'un nom et d'un prénom ? Est-ce une obligation dans ton cas ?
Olivier C a écrit :

Bonjour. C'est tout à fait possible, à ceci prêt qu'il ne faut plutôt dire : "Dans le html on dit qu'il y a une div.logo à un endroit. Dans le css on applique une image sur cette div via la propriété background-image".

Ce qui donnerait à peut prêt ceci :
.logo {
  background-image: url(img/logo);
}

@media (min-width: 50em) {
  .logo {
    background-image: url(img/logo1);
  }
}

Un exemple en ligne avec la propriété background-color.

Merci de ta réponse Smiley smile c'est probablement moi mais ca ne marche pas, j'ai du mal à visualiser la forme du html, c'est une simple div ?
<body>
	<header>
		<div class="logo"></div>
        </header>
</body>

et css
    header .logo{
        margin-top: 100px;
        float: left;
        background-image: url(TEST/logo.png)
	width:194px;
	height:90px;
    }


Dans ce cas là aucune image pour l'instant

SolidSnake a écrit :

Mais, j'ai une question, pourquoi gérer de manière aussi compliquée (dans une image), l'affichage d'un nom et d'un prénom ? Est-ce une obligation dans ton cas ?


Justement j'y pensais, le nom et prénom est écrit dans une font particulière, si je demande à la personne quelle font est utilisée, est-ce que je peux le mettre sous forme de texte ? Cela veut dire que je dois intégrer le fichier .otf dans le css ? Ca ne sera pas trop long à charger ?
Je vais voir un peu tous ca Smiley smile
cedmars a écrit :
Dans ce cas là aucune image pour l'instant


Regardez bien votre code : il manque un point virgule...
header .logo{
        margin-top: 100px;
        float: left;
        background-image: url(TEST/logo.png) // ici !
	width:194px;
	height:90px;
    }

Modifié par Olivier C (14 Nov 2015 - 06:36)
cedmars a écrit :
Justement j'y pensais, le nom et prénom est écrit dans une font particulière, si je demande à la personne quelle font est utilisée, est-ce que je peux le mettre sous forme de texte ? Cela veut dire que je dois intégrer le fichier .otf dans le css ? Ca ne sera pas trop long à charger ?
Je vais voir un peu tous ca Smiley smile

Il est possible depuis quelques temps maintenant d'intégrer des polices d'écriture sur les pages web, en utilisant les font-face, c'est assez simple à mettre en place, et de manière générale pas trop lourd SI tu l'utilises avec parcimonie (à tester donc).
Je te conseille d'aller voir le site font-squirrel pour créer ton package tout fait, ou pour ne pas t'embêter la vie, il existe aussi google-font...
Merci à vous, je n'avais pas eu le temps de vérifier.
Donc avant j'en avais aucun... là j'ai les deux ! Smiley cligne j'ai rajouté le point virgule mais du coup quand je rétrécis la fenêtre les deux viennent se coller l'un sur l'autre.
Je veux bien une réponse si cela peut aider des gens plus tard, je pense que j'ai un problème dans mon responsive et dans le choix des tailles (media max-width,...).

Quoiqu'il en soit j'ai essayé la solution texte qui me paraissait plus simple et en effet cela a marché très rapidement Smiley cligne

Donc pour moi le sujet est résolu mais si vous souhaitez répondre à la première question (pourquoi les deux s'affichent ?) je vous laisse un petit temps libre Smiley smile

Merci Smiley cligne
Modifié par cedmars (27 Nov 2015 - 18:08)
Sujet clos
Aller à