Conflit image responsive et animation css

WRInaute passionné
Salut à tous,

J'ai dans ma feuille de style css le code ci-dessous afin que toutes les images de mon site soient responsives :
Code:
img {max-width: 100%;height: auto;}
Le problème c'est que j'ai une animation css du type kenburns et le code ci-dessus réduit la taille de l'image de mon animation css, ce qui n'est pas beau. Voici le code de mon animation :
Code:
.imageContainer{position:relative;z-index:1;overflow: hidden;width: 100%;height: 350px!important;margin-top:20px;margin-bottom:20px;}
.imageContainer img{animation: kenburns 20s infinite;}
Comment faire pour ne pas tenir compte du code img {max-width: 100%;height: auto;} pour cette animation css .imageContainer img{animation: kenburns 20s infinite;} ?

Merci pour vos réponses.
 
WRInaute discret
Bonjour,

Pourquoi ne pas mettre la valeur none a ton animation avec les media queries afin qu'elle s'exécute seulement sur desktop ?

John.
 
WRInaute passionné
https://developer.mozilla.org/fr/docs/Web/CSS/:not

Code:
img:not(.imageContainer img) {max-width: 100%;height: auto;}
Merci spout ça marche nickel :)

J'avais essayé ce code :
Code:
img:not(.imageContainer) {max-width: 100%;height: auto;}
mais ça ne marchait pas, il faut ajouter le img après la class (.imageContainer img) pour que ça fonctionne.

Si j'ai d'autres exceptions (class) à ajouter dans img:not, est-ce possible ?
 
WRInaute passionné
Je m'aperçois qu'en faite le code ci-dessous ne marche pas correctement :
Code:
img:not(.imageContainer img){max-width: 100%;height: auto;}
Mon animation fonctionne bien mais les autres images de mon site ne sont pas responsive.

J'ai 2 fichiers css distinctes, l'un pour le code css de mon site et l'autre spécifique à mon animation, le fichier css de mon animation est inclus après l'autre fichier css, n'y a-t-il pas la possibilité de rajouter du code css dans mon fichier css de mon animation afin de solutionner ce problème ?

J'ai essayé ce code dans le fichier css de mon animation mais ça ne marche pas :
Code:
.imageContainer img{max-width: inherit !important;height: inherit !important;}

Comment solutionner ce problème ?
 
Discussions similaires
Haut