Dimensionner une image pour prendre la largeur de l'écran mobile
Résolu
joubib
Messages postés
4
Statut
Membre
-
joubib Messages postés 4 Statut Membre -
joubib Messages postés 4 Statut Membre -
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 :
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
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
A voir également:
- Dimensionner une image pour prendre la largeur de l'écran mobile
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Comment prendre une capture d'écran sur samsung - Guide
- Légender une image - Guide
- Prendre une photo avec son pc - Guide
2 réponses
Bosnoir,
Essayez en mettant ces deux lignes META dans l'en-tête du code HTML:
Tenez-moi au courant
Essayez en mettant ces deux lignes META dans l'en-tête du code HTML:
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes"/>
Tenez-moi au courant
Bonjour,
Tout d'abord merci pour votre réponse.
Pour ce qui est de la META viewport, j'avais déjà ceci :
Sinon j'ai essayé avec la deuxième META que vous m'avez conseillée, sans succès...
Je me demande si les mobiles prennent en compte les unités "vw" ?
Car si j'indique une tailles en pixels, il n'y a pas de souci.
Y'aurait-il un moyen de récupérer la taille de l'écran en JavaScript pour l'indiquer en pixels ?
Merci de vos réponses. Cordialement.
Jonathan Buso
Tout d'abord merci pour votre réponse.
Pour ce qui est de la META viewport, j'avais déjà ceci :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Sinon j'ai essayé avec la deuxième META que vous m'avez conseillée, sans succès...
Je me demande si les mobiles prennent en compte les unités "vw" ?
Car si j'indique une tailles en pixels, il n'y a pas de souci.
Y'aurait-il un moyen de récupérer la taille de l'écran en JavaScript pour l'indiquer en pixels ?
Merci de vos réponses. Cordialement.
Jonathan Buso