1448 sujets

Web Mobile et responsive web design

Bonjour,

J'ai déjà quelques notions en programmation responsive, mais je bloque sur un truc.

Voilà, j'aimerais adapter la responsivité de mon header en fonction de l'image qu'il y aura dedans. En fonction de si l'image est en format portait ou payage.

J'ai essayer en utilisant les Media queries, mais les quelques test que j'ai fait n'était pas concluant Smiley ohwell

Cordialement,

Léo
Quelque chose comme ca ?


background-image: url("../img/tonImage-portrait.svg"); 

@media (min-width: 768px) {
background-image: url("../img/tonImage-paysage.svg"); 
}
Plus dans l'idée que si l'image est en portrait elle soit en width: 100%;
Mais si l'image est en paysage alors elle serra plutôt en width : 30%;
connecté
Modérateur
Salut,

Je pense pas que ce soit possible en CSS, encore moins avec les Media Queries dont l'idée est de s'adapter au média, à l'écran, et non a un contenu.

Bref si tu n'a pas de moyen de savoir si tes images sont en paysage ou en portrait (en mettant une classe spécifique dessus par exemple) il va falloir que tu passe par du JS qui va check ls ratio et coller des classe dessus pour arriver un a truc comme ça en CSS :

@media (max-width: 800px) {
    .img-paysage {
        width:30%;
    }
    .img-portrait{
        width:100%;
    }
}
C'est ce que j'imaginais, le fait qu'il faudra que je passe par du JS. Mais je voulais quand même être sur qu'il n'y avais pas une solution en css.

Merci beaucoup pour ta réponse en tout cas.
connecté
Modérateur
Yes. En tout cas je ne vois pas de moyen en pur CSS pour détecter si une image est en paysage ou en portrait... désolé.

Bon courage !
Bonne journée Smiley smile