Conflit image responsive et animation css

[poupilou]

Salut à tous,

J'ai dans ma feuille de style css le code ci-dessous afin que toutes les images de mon site soient responsives :

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 :

.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.

 

[spout]

https://developer.mozilla.org/fr/docs/Web/CSS/:not

img:not(.imageContainer img) {max-width: 100%;height: auto;}

 

[John13]

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.

 

[poupilou]

https://developer.mozilla.org/fr/docs/Web/CSS/:not

img:not(.imageContainer img) {max-width: 100%;height: auto;}

Merci spout ça marche nickel

J'avais essayé ce 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 ?

 

[poupilou]

Je m'aperçois qu'en faite le code ci-dessous ne marche pas correctement :

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 :

.imageContainer img{max-width: inherit !important;height: inherit !important;}

Comment solutionner ce problème ?