Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mediaqueries , image largeur ecran

Sujet résolu
    22 mars 2019 à 10:10:58

    Bonjour à tous 

    Je finalise mon site en responsive et je souhaiterai que mes images prennent toute la largeur de mon écran quand je passe en responsive  . Je n'arrive pas à modifier leur tailles ni leurs largeur et je ne comprends pas pourquoi .

    Quelqu'un peux me donner un coup de génie ?

    Voici mon code 

    <figure>
     		<img src ="images/portfolio/tn_01.jpg" alt="photo01" />
     			<figcaption> 
     			<div class="cercle"></div>
    					<div class="eye-logo"> 
    					<p> <i class="fas fa-eye"></i> </p>
    					</div>
    			</figcaption>
        </figure>
    .images /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
    	{ 
    
    	display:flex;
    	flex-direction: column; 
    	padding-bottom: 80px;
    	 }



    • Partager sur Facebook
    • Partager sur Twitter
      22 mars 2019 à 13:52:55

      Salut, ton CSS ne correspond pas au code HTML la class images du coup si tu utilise ta class images pour modifier ça largeur ca ne risque pas de fonctionner...
      • Partager sur Facebook
      • Partager sur Twitter
        22 mars 2019 à 15:21:10

        noopy360 a écrit:

        Salut, ton CSS ne correspond pas au code HTML la class images du coup si tu utilise ta class images pour modifier ça largeur ca ne risque pas de fonctionner...

        Oui oui je sais bien mais justement je me demandais sur quoi il fallait que je modifie et surtout quel propriété utiliser car rien ne fonctionne



        • Partager sur Facebook
        • Partager sur Twitter
          22 mars 2019 à 15:40:00

          Il te faut pour ça que tu modifie ton CSS comme ça :

          figure /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
          	{ 
          
          	display:flex;
          	flex-direction: column; 
          	padding-bottom: 80px;
          	 }


          Si tu as la réponse à ton problème pense à mettre ton sujet en résolu, merci

          • Partager sur Facebook
          • Partager sur Twitter
            22 mars 2019 à 17:41:16

            Avec le code que tu nous montres, il suffit d'ajouter ça aux CSS :

             img {
               width:100%;
            }



            • Partager sur Facebook
            • Partager sur Twitter

            Alain - Linkedin

              25 mars 2019 à 9:01:44

              noopy360 a écrit:

              Il te faut pour ça que tu modifie ton CSS comme ça :

              figure /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
              	{ 
              
              	display:flex;
              	flex-direction: column; 
              	padding-bottom: 80px;
              	 }


              Si tu as la réponse à ton problème pense à mettre ton sujet en résolu, merci

              Désolé pour le temps de réponse , même en changeant mon code CSS comme cela , ca ne prend pas toute la largeur ; ca me laisse des marges de chaque côtés et l'image est etirée ...



              • Partager sur Facebook
              • Partager sur Twitter
                25 mars 2019 à 10:13:58

                Bonjour, tu as raison il faut faire ça aussi

                body{ margin:0; }
                figure{ /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
                  margin:0;
                  display:flex;
                  flex-direction: column; 
                  padding-bottom: 80px;
                }

                Si tu as la réponse à ton problème pense à mettre ton sujet en résolu, merci

                • Partager sur Facebook
                • Partager sur Twitter
                  25 mars 2019 à 10:35:57

                  noopy360 a écrit:

                  Bonjour, tu as raison il faut faire ça aussi

                  body{ margin:0; }
                  figure{ /* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
                    margin:0;
                    display:flex;
                    flex-direction: column; 
                    padding-bottom: 80px;
                  }

                  Pour que cela fonctionne j'ai du mettre une marge négative ( -60px) 

                  J'ai également un autre soucis qui m'ennuie , je voudrais que mes images soit en colonnes collées les unes aux autres , as tu une idée de comment réaliser ceci ?



                  • Partager sur Facebook
                  • Partager sur Twitter
                    25 mars 2019 à 10:39:52

                    Tu ne nous donne pas assez de code html css montre nous toute ta page pour cela !!!
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Mediaqueries , image largeur ecran

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown