Conflit image responsive et animation css

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 20 Février 2020.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    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.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 028
    J'aime reçus:
    291
    poupilou apprécie ceci.
  3. John13
    John13 WRInaute discret
    Inscrit:
    6 Janvier 2020
    Messages:
    69
    J'aime reçus:
    1
    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.
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    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 ?
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    809
    J'aime reçus:
    10
    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 ?
     
Chargement...
Similar Threads - Conflit image responsive Forum Date
Conflit GA et GTM Google Analytics 11 Février 2020
Conflit de redirection avec les www URL Rewriting et .htaccess 5 Décembre 2019
Conflit entre mon filtre de vue Analytics et mon objectif Google Analytics 25 Octobre 2019
Page d'accueil non indexée ? Conflit avec robots.txt Crawl et indexation Google, sitemaps 2 Octobre 2019
WordPress Conflit Yoast SEO / Rating Widget Problèmes de référencement spécifiques à vos sites 6 Août 2019
WordPress Conflit de hreflang Référencement Google 12 Juin 2019
Conflits d'attributs hreflang dans le code source de page Débuter en référencement 24 Avril 2019
Conflit de redirection 301 et Urlrewriting Netlinking, backlinks, liens et redirections 20 Février 2019
Résolu Conflit de redirection dans le .htaccess Débuter en référencement 14 Décembre 2017
Problème de conflit javascript Développement d'un site Web ou d'une appli mobile 26 Juin 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice