Discussion :

[abc.xyz]

Bonjour,

je vais essayer d'être le plus clair possible afin que vous puissiez m'aider.

Considérons un bandeau horizontal en haut d'une page html dont la hauteur est exprimée en % (par ex height:20%).
Dans le coin gauche de ce bandeau je mets un logo qui est une div avec en background un fichier gif (ou png, ou jpg) et des margin pour que ce logo se cale avec soin dans le bandeau.
Il est bien évident que la hauteur du bandeau étant en %, cette hauteur va varier suivant l'écran. Et donc il faudra peut être pour les très grands écrans (par le biais des media queries) changer le fichier image et en mettre un plus grand et même changer les marges pour que ce nouveau grand logo. Voilà l'inconvénient de travailler avec un bandeau dont la hauteur est exprimée en % lorsqu'on a à incorporer dans ce bandeau des éléments de taille fixe (le logo).
Existe t'il un moyen de rendre le logo responsive c'est à dire qu'il se cale dans le bandeau de la même façon sur tous les écrans?(et donc par ce fait de ne pas avoir à changer le fichier image du logo pour en mettre un plus grand pour les grands écrans)

[Invité]

Bonjour,

considérons que tu nous montres un code HTML + CSS qui montre clairement ce que tu veux (et qu'on puisse tester) , et on en reparleras.

[mathieuDev31]

Si l'image de ton logo est fluide (width:100%) la hauteur de ton image devrait se régler en fonction du bandeau, à priori pas de difficulté si j'ai bien compris ta question
Le fait que la hauteur du bandeau soit en % n'y change rien.

Reste le problème du centrage vertical du logo avec un vertical align ou margin.
Enfin, n'oublies pas d'adapter la taille originale du logo à un affichage très large (2200px) pour éviter la pixellisation.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
div-logo {
	display:inline-block;
	width:20%;
	vertical-align:middle;
}
div-logo img {
	width:100%;
}

[abc.xyz]

Bonjour,

j'ai une question très similaire sur les images en HTML/CSS, c'est pourquoi je reste dans ce post, c'est plus propre.(au lieu de faire un nouveau post).

J'ai un slider d'images sur une page et ces images ont toutes la même taille en largeur et hauteur.

Sur ordi portable, ça rend bien, car l'espace sur la page est bien géré, par contre sur grand écran desktop de bureau c'est pas génial car les images du slider vous comprenez qu'elles n'occupent pas beaucoup de place sur ce type d'écran. L'espace n'est pas bien géré. C'est pourquoi j'ai envisagé une solution:

Agrandir les images avec Aperçu (soft intégré à mac pour ceux qui connaissent pas) et avec l'aide des media queries mettre en place ces images pour grand écran.

Existe t'il une autre solution que d'agrandir les images?

[Invité]

Bonjour,

Existe t'il une autre solution que d'agrandir les images?

Oui : cherche des scripts de slider "responsive" => dont le nombre d'images "vues" s'adapte en fonction de la largeur d'écran/fenêtre.

Exemple :

• OWL Carousel

[abc.xyz]

je me suis mal expliqué , en fait j'ai oublié de vous dire que le slider que j'utilise est responsive et que cela ne résoud en rien le problème.
En effet:
le slider étant responsive il adapte bien l'image sur tablette, mobile etc..mais pas sur grand écran desktop de bureau, et pour la raison que le slider adapte la taille de l'image à l'écran tant que cette taille d'image affichée ne dépasse pas la taille initiale de l'image.(sur grand écran desktop il y a dépassement)

Je m'explique plus en détails: si sur grand écran de bureau je decide de mettre la width du container du slider en %, mettons 75% car j'estime que c'est avec ce réglage que l'image sera suffisament grande, et bien le container du slider est plus grand que l'image et cela donne un effet sale de par le fait que le container du slider dépasse par rapport à l'image.

Je dis peut être une grosse grosse grosse bêtise mais il me semble que les sliders responsives ne peuvent aller au delà de la taille initiale de l'image.

Bref ce post sera donc matière à explications.

Donc je pense que la solution de changer la taille de l'image est bien la seule.

[abc.xyz]

Bonjour,
du code?OK.
(je précise que la problématique reste celle de mon tout premier message dans ce post, problématique que j'ai exprimée sans code, alors voici maintenant le code)
HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="header" class="container-fluid hidden-xs">
  <div class="row art"> 
    <div class="col-sm-2 col-md-2 hidden-xs marge"> 
       <a href="http://www.exemple.fr"><div class="logo"></div></a>
     </div>
...

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
...
#header{
 height:19%;
 border-bottom:1px solid white;
}
 
.logo{
  float:left;
  width:120px;
  height:92px;
  background:url(../img/logo.gif);
  margin:0.5% 0 0 15%;
}
...

Voilà vous imaginez bien que la "hauteur" de #header va augmenter suivant la taille de l'écran puisqu'elle est exprimée en %. Et quand cette hauteur va augmenter logo.gif va rester à la même taille donc logo.gif ne sera pas bien positionnée dans cette #header qui augmente. Une solution est à l'aide des media query de mettre une image plus grande que logo.gif en background lorsque la hauteur de #header va augmenter. Mais c'est pas idéal. Quel est le moyen pour que l'image grandisse en même temps que #header et se positionne correctement dans ce #header qui augmente?

[NoSmoking]

Bonjour,

Quel est le moyen pour que l'image grandisse en même temps que #header...

déjà dit un nombre incalculable de fois sur ce forum, l'unité px est à proscrire dans ce cas, il faut passer par des %.

Dans ton cas le logo doit suivre et être calculé d'après son parent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.logo {
  margin:0.5% 0 0 15%;
  height: 100% -( 0.5% +15%); /* à toi de faire le calcul ;°) */
}

[abc.xyz]

Bonjour,
j'ai bien compris qu'il faut utiliser des % à la lecture de ce message.
Seulement à la lecture de ce message je ne comprends rien à: "Dans ton cas le logo doit suivre" et à:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 height: 100% -( 0.5% +15%);

[NoSmoking]

Il est parfois nécessaire de faire de simples essais pour voir si cela marche !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<title>Et pourtant cela marche !</title>
<style>
 html,body{
  margin:0;
  padding:0;
  height:100%;
  background:#cde;
}
header {
   height:50%;
   background:#abc;
}
</style>
</head>
<body>
  <header>
    <img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1420739142" style="height:100%">
  </header>
</body>
</html>

[abc.xyz]

Bonjour,
la réponse qui m'a été donnée ne correspond pas au problème que j'ai énoncé car j'ai bien testé ce qui m'a été proposé:
1-j'ai remplacé la balise div du logo par une balise img
2-je l'ai mise en height 100% du parent
3- le problème reste exactement le même: Le logo est trop petit sur les grands écrans Desktop..

[abc.xyz]

Bonjour,

j'ai donné le code dans le message du 10/03/16 à 14h12 de ce post.

Si vous regardez bien il y a bootstrap qui fait que l'endroit où se situe le logo diffère en largeur suivant la taille de l'écran.
La hauteur du bandeau diffère, elle, en hauteur suivant la taille de l'écran car est exprimée en %.
Donc le logo se trouve dans une zone qui grandit en largeur et en hauteur sur les grands desktops par rapport aux plus petits écrans.
La problématique de ce post est: comment coder une image située dans cette zone qui grandirait elle aussi proportionnellement en largeur et en hauteur lorsque la taille de l'écran grandit.

[Invité]

Bonjour,

2-je l'ai mise en height 100% du parent

Pour que ça fonctionne, il faut que TOUS les parents aient une hauteur définie, depuis <html>,<body> (ex.: height:100%; ) jusqu'au parent direct.

Et si tu veux que ça progresse, merci de mettre des COPIES d'ECRAN qui montrant le problème.

[abc.xyz]

Rebonjour,

j'ai testé votre solution en effet mettre la height de cette façon gère bien le problème cela correspond donc à la solution que je recherchais, mais avez vous pensé au fait qu'avec cette solution l'image se voit donc étirée voire déformée plus l'écran devient grand?

[Invité]

considérons que tu nous montres un code HTML + CSS qui montre clairement ce que tu veux (et qu'on puisse tester) , et on en reparleras.

Jusqu'ici, tu n'as donné qu'une bribe de code...

Un exemple du problème en ligne serait bienvenu.

Sinon, autant en rester là.

[NoSmoking]

...cela correspond donc à la solution que je recherchais,...

nous en sommes heureux

...mais avez vous pensé au fait qu'avec cette solution l'image se voit donc étirée voire déformée plus l'écran devient grand?

et toi est ce que tu sais au moins au départ ce que tu souhaites vraiment et te donnes tu les moyens de trouver une solution en simplement essayant de comprendre ce qui se passe.
On n'est pas à ta place pour gérer ton soucis ne connaissant pas en fait ton réel besoin et ta spécification.

[abc.xyz]

Bonjour,
Je pense que tout le monde a pu le comprendre le problème, c'est l' histoire de comment adapter un logo (un fichier image) pour qu'il s'affiche de façon propre sur tous les écrans lorsque la zone dans laquelle se trouve l'image est changeante suivant l'écran : lorsque la hauteur de la zone dans laquelle se trouve l'image est exprimée en % la taille de cette zone va donc fatalement varier suivant la taille de l'écran, de plus la largeur de cette zone est exprimée avec Bootstrap donc le problème est exactement le même avec la largeur qu'avec la hauteur. Voici le problème résumé avec des mots, le code associé est un peu plus haut dans le post.
La réponse que vous m'avez donné tombe sous le sens je pense, dans la théorie du moins, mais dans la pratique elle n'est pas idéale je pense.
En effet lorsque je vous dis que votre solution "déforme" l'image, il fallait s'y attendre puisque votre solution passe par des %.
Je pense que le lien suivant apporte des solutions au problème, qu'en pensez vous?
http://blog.nursit.net/Adaptive-Imag...nsive-Web.html

[Invité]

Bonjour,

Je pense que tout le monde a pu le comprendre le problème...

Tu as raison.

De fait, il faut se rendre à l'évidence : c'est toi qui ne comprends pas les réponses.

Et ton bavardage n'y change rien.

Jusqu'ici, tu n'as donné qu'une bribe de code...

Un exemple du problème en ligne serait bienvenu.

Sinon, autant en rester là.