Responsive et taille images

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

Je n'ai pas fermé ma balise ul volontairement ici car c'est une suite d'images en colonne qui se trouve sur mon site et je n'en ai mise qu'une seule ici .

<ul class="images">
			
	<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>

figure/* ENSEMBLE DES IMAGES SECTION NOS PROJETS */
	{ 

	display:flex;
	flex-direction: column; 
	padding-bottom: 80px;
	width:100%;
	
	 }

Bonjour,

Tu n'indiques pas quel est le rendu actuel ?

Pour déboguer, tu peux survoler chaque élément dans les DevTools de l'élément img à son ancêtre body et voir quelle est la largeur de chacun… Pour mieux visualiser la situation, il est possible d'ajouter couleur de fond et outline ou bordure :

.images {
  background: pink;
  outline: 3px dashed double darkblue;
}

.images img {
  border: 1px solid darkred;
}

Hello

déjà après une balise ul, on met des li. Donc soit tu remplace ton ul par une div, soit tu entoures tes figure par des li.
Ton figure a une largeur de 100%, mais pas ton image, tu dois également lui attribuer un width:100% je pense.
Modifié par Pedrothelion (25 Mar 2019 - 11:50)