Un petit problème des images responsive !!

Karim Boubouh
Les bases HTML/CSS

salut,
je suit entrain de rendre mon site un peut responsive,
généralement les trucks sa roule bon.
Mais j'ai rencontré un GRAND Problème avec les images.
j'ai fait quelque recherche sur internet, il semble que c'est un vaste sujet, (taille , images multiples, chargement des pages ...)
Moi je cherche seulement que mais image ne dépasse pas la taille de l'écran, par exemple l'image peut prendre jusqu’à 80% de l'écran si elle est plus grande que la taille de l'écran.
je demande s'il y a une façon simple a implémenter ça ?

11 réponses

Vallyan
Réponse acceptée

Dans ton css, le width et le max-width sont mutuellement exclusif (ca sert a rien de mettre les deux).
Comme tu as mis le max-width en !important, c'est lui qui sera pris en compte (tu peux donc virer le witdh), et donc les images de petite taille ne seront pas aggrandies au-dela de leur résolution.
Par contre mets ton max-width a 80% si tu veux pas que les images puissent prendre toute la taille de ton écran.

Lotfi Berrahal

bonjour
tu veux dire

img{width:80%}

??

Vallyan

ou éventuellement

max-width: 80%

si les images peuvent aussi être plus petites que les 80% de l'écran ...

Benjamin Derepas

Pour des images responsives, ce petit bout de code te sera très pratique :

img{
max-width: 80%;
height:auto;
}

Ainsi la largeur des images ne dépassera ton conteneur, et la hauteur sera adapté pour ne pas déformer l'image

Lotfi Berrahal

@Benjamin il me semble que si tu met que width les images sont proportionnelle et du coup ne se déforme pas en hauteur.

Karim Boubouh
Auteur

salut, merci pour c'est propositions utile, J'ai essayer ceci mais malheureusement ça fonctionne pas tout le temps, mes image ne sont pas isolé, elles sont dans des div(s) ..., par fois ça marche, autre non , je sait pas vraiment ...

coloo

link ou un codepen ça pourrait nous aider à t'aider :)

Karim Boubouh
Auteur

voici , 2 exemples (Images de TEST) sur mon domaine de dévlopement, (essayer de redimensionner la fenaitre du navigateur )
exemple 1 avec une grande image:
Texte du lien
exemple 2 avec des petites images:
Texte du lien

Vallyan

La question était: comment faire pour que les images ne soient pas plus large que 80% de l'écran. Or dans tes exemples je ne vois pas de problème de taille d'image trop grande ... du coup c'est quoi que tu cherches a faire exactement ?

Karim Boubouh
Auteur

Les images vont être entrer dynamiquement par l'utilisateur, dans l'exemple j'ai utilisé un break point des média queries. voici le code css sur une taille inférieur a 960px et 640px :

#gallery #bigimage img {
    max-width: 600px;
}
@media screen and (max-width:640px){
    #gallery #bigimage img {
        max-width: 100% !important;
        width:75%;
    }
}
@media screen and (max-width:960px){
    #gallery #bigimage img {
        max-width: 100% !important;
        width:50%;
    }
}

le problème c'est qu'une petite image va être redimensionner a width=80% par exemple va perdre sa précision/taille.

Karim Boubouh
Auteur

c'est bon j'ai pu le faire.
le problème c’était dans les parents de la div des image.
MERCI ++;