1486 sujets

Web Mobile et responsive web design

Mettre reponsive une div contenant une image portait ou payage.

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%;
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.
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
Sujet clos
Aller à