Dimensionner une image pour prendre la largeur de l'écran mobile

Bonjour,

Je suis en train de développer un site sur lequel j'ai une bannière sous forme de liste d'images.

Ces images sont suivies horizontalement et défilent l'une après l'autre à intervalle choisi. (une image reste pendant 5s, puis défile jusqu'à la suivante, ainsi de suite).

Tout ceci réalisé à l'aide de CSS, sans JavaScript.

La structure HTML est la suivante :

   <div id="banniere">
       <ul id="slider">
           <li>
		<img src="01.png".../>
	   </li>
           <li> ... </li>
           <li> ... </li>
           <li> ... </li>
           <li> ... </li>
           <li> ... </li>
       </ul>
   </div>

Le div "banniere" a une taille de 100% et overflow : hidden.
Une animation est active sur le "slider" et mes balise "img" ont une taille de 100vw.

Actuellement, les images réagissent exactement comme prévu sur navigateur c'est-à-dire elles prennent la taille de toute la fenêtre et se redimensionnent avec elle.

Cependant, sur mobile, les images ne se redimensionnent pas et prennent leur taille d'origine (1000px), et l'animation n'est pas active.

Avez-vous une piste qui pourrait me mettre sur la voie ? Merci à vous d'avoir pris le temps d'avoir lu et j'espère avoir été assez clair dans mes explications.

Cordialement. Joubib