• Articles
• admin

par Christopher Heng, thesitewizard.com

Un visiteur m’a demandé comment il pouvait transformer une image pour qu’elle s’affiche verticalement lorsque quelqu’un a consulté sa page Web sur un téléphone portable. C’est-à-dire qu’il voulait que l’image soit montrée dans son orientation habituelle, avec le côté le plus long horizontal, sur un ordinateur de bureau ou portable, mais tourné sur un téléphone, de sorte que son côté le plus long est maintenant vertical.

Préambule

• Cet article traite d’une image qui doit être affichée différemment sur les moniteurs d’ordinateur et les téléphones mobiles. Si vous souhaitez simplement faire pivoter une image de manière permanente afin qu’elle soit toujours dans cette positionindividu de la façon dont elle est vue, vous devez simplement utiliser animage editortpour le faire. C’est beaucoup plus simple et plus efficace, et cela évite les problèmes qui surviennent lorsque vous obtenez CSS pour faire la rotation pour vous.

• Une alternative à la rotation d’une image consiste à la rétrécir pour s’adapter à la largeur de l’écran d’un téléphone portable. La plupart des sites Web le font de cette façon. Si vous préférez cela, veuillez lire comment Rendre Vos Images Adaptées aux Mobiles (Responsive Design) à la place. J’ai aussi un article qui vous montre comment masquer des images sur un site Web lorsqu’il est consulté sur un téléphone mobile.

• Mon visiteur avait un site Web qui utilisait la mise en page à 2 colonnes générée par l’assistant de mise en page mobile-FriendlyLayout, mais vous pouvez également utiliser les techniques décrites ci-dessous sur un site Web conçu à l’aide de toute mise en page, créée par vous-même ou obtenue ailleurs. C’est-à-dire que la méthode est générale qui peut être utiliséepar rapport à la façon dont vous avez conçu le site.

• Évidemment, cet article suppose que vous avez déjà un site Web. Sinon, commencez par le guide Surcomment créer un site Web.Vous pouvez toujours revenir à cet article pour affiner les choses après avoir terminé la conception de base.

Comment faire pivoter une image en CSS

Disons que vous avez une image avec un id de « demo_picture ». Pour le faire pivoter, utilisez le CSS suivant.

Si cela fait pivoter votre image dans la mauvaise direction, utilisez rotate(90deg) à la place. Comme vous l’avez deviné, vous pouvez utiliser n’importe quel angle que vous aimez. Mon utilisation de 270 et 90 degrés est parce quele sujet à portée de main est de le tourner pour que sa longueur soit maintenant la hauteur et vice versa.

Cependant, si vous utilisez simplement le code ci-dessus, vous remarquerez rapidement un problème. L’image tourne autour d’un point en son centre (« centre » si vous utilisez une variante différente de l’anglais). Cela signifie que l’image pivotée chevauchera le contenu au-dessus et au-dessous.

À ce stade, vous penserez probablement: « Hmm. C’est facile à résoudre. Je vais juste mettre l’image dans son propre bloc DIV avec une hauteur fixe qui donne suffisamment de place pour l’image pivotée. »

Donc, pour une image a une largeur de (disons) 202 pixels et une hauteur de 42 pixels, le code HTML ressemblera à ceci:

Et le CSS pour donner au bloc DIV la hauteur nécessaire est:

Malheureusement, si vous utilisez le code tel quel, vous constaterez que bien que le conteneur ait la hauteur requise, l’image pivotée chevauchera toujours le paragraphe au-dessus tout en laissant un grand espace en dessous, puisqu’il pivote sur son centre, tout en restant essentiellement là où il était.

L’astuce consiste à ajuster sa position d’origine avant de la faire tourner, de sorte que la sortie finale soit au bon endroit. Pour être sûr que le résultat de la rotation ne couvre aucun texte ci-dessus, mais se trouve carrément dans le bloc DIV qui lui est alloué, nous devons le déplacer d’une distance égale à (width - height)/2 vers le bas (où « / » représente le signe de division). Vous pouvez facilement effectuer ce calcul manuellement et mettre les résultats dans le CSS, ou, si vous voulez laisser un enregistrement de la façon dont vous avez obtenu le nombre final, laissez le navigateur faire le calcul pour vous, avec « calc((202px - 42px)/2)« . Vous devrez, bien sûr, changer les chiffres en ceux qui conviennent à votre image. Je vais utiliser la fonction calc() dans ce tutoriel pour qu’il soit plus clair comment je suis arrivé au résultat.

La modification de la position supérieure peut être effectuée de différentes manières, par exemple avec une règle margin-top, ou si vous préférez continuer à utiliser les fonctions tranform, avec translateY().

L’exemple suivant utilise margin-top:

Le code ci-dessous utilise une fonction de transformation:

Si vous choisissez d’utiliser translateY(), assurez-vous que la traduction est effectuée avant la rotation, car l’ordre des opérations est significatif.

La photo de démonstration ci-dessus avait sa position supérieure ajustée avec margin-top et pivotée, en utilisant le code exact décrit précédemment. Mais comme je l’ai dit, vous pouvez utiliser n’importe quelle méthode de positionnement CSS que vous voulez.

Comment faire Pivoter l’image Uniquement Lorsqu’elle est Visualisée sur un Téléphone mobile ou un Petit écran

À ce stade, vous penserez probablement que pour effectuer la rotation uniquement lorsque l’image est visualisée sur un appareil à petit écran comme un téléphone mobile, tout ce que vous devez faire est de placer les règles dans la section @media pour cet appareil.

C’est vrai. Jusqu’à un certain point. Si vous le faites sans prendre d’autres mesures, vous rencontrerez probablement un autre problème. Les feuilles de style adaptées aux mobiles ont généralement les règles suivantes :

Cette règle redimensionne les grandes images afin qu’elles s’adaptent aux petits écrans. C’est la bonne approche à adopter, sauf lorsque vous ne voulez pas réellement que l’image soit redimensionnée mais tournée. Avec la règle générale ci-dessus, l’image est redimensionnée par le navigateur avant d’être tournée, ce qui n’est pas ce que vous voulez ici. Il supprimera également vos calculs margin-top (ou translateY ou autre), car l’image n’aura plus ses dimensions d’origine.

Pour résoudre ce problème, ajoutez « max-width: none; » aux règles « #demo_picture« .

Dans cet esprit, nous pouvons ajouter toutes les règles que nous avons accumulées jusqu’à présent à la feuille de style.

Disons que vous avez créé votre page sur la base d’un modèle généré par l’Assistant de mise en page et que vous avez choisi 629 pixels comme point où elle passe en mode une colonne pour mobile phones.In dans un tel cas, insérez les règles juste après la ligne « @media » dans le fichier « styles.css« .

Si vous n’avez pas utilisé l’Assistant de mise en page et que vous ne savez pas comment créer votre propre section @media pour les appareils à petit écran, veuillez lire commEnt créer un site Web adapté aux mobiles: Responsive Design en CSS d’abord. Ne copiez pas aveuglément le code ci-dessus.

Notez que vous devrez tester la page sur un téléphone (ou une fenêtre de navigateur de bureau redimensionnée pour en imiter une).En fonction de la largeur et de la hauteur de votre image, vous pouvez constater que les résultats sont inférieurs à la hauteur. Par exemple, si l’image est grande, vous pouvez trouver que la sortie finale doit être partiellement affichée sur le côté droit du téléphone mobile. Si c’est le cas, définissez un « margin-left » survotre image avec un numéro approprié pour la déplacer vers la gauche. (Astuce: utilisez des nombres négatifs dans margin-left pour déplacer l’image vers la gauche au-delà de ses limites d’origine.)

Compatibilité du navigateur

Les fonctions de transformation sont disponibles dans tous les navigateurs modernes. Si vos visiteurs utilisent Internet Explorer (qui est maintenant obsolète), ils auront besoin d’au moins la version 9.

Droits d’auteur ©2020 Christopher Heng. Tous droits réservés.
Obtenez plus de conseils et d’articles gratuits comme celui-ci, sur la conception Web, la promotion, les revenus et les scripts, auprès de https://www.thesitewizard.com/.

Trouvez-vous cet article utile? Vous pouvez apprendre de nouveaux articles et scripts publiés sur thesitewizard.comby s’abonnant au flux RSS. Pointez simplement votre lecteur de flux RSS ou un navigateur prenant en charge les flux RSS sur https://www.thesitewizard.com/ thesitewizard.XML.Vous pouvez en savoir plus sur la façon de vous abonner aux flux du site toRSS à partir de ma FAQ RSS.

Veuillez ne pas Réimprimer Cet article

Cet article est protégé par le droit d’auteur. Veuillez ne pas reproduire ou distribuer cet article en tout ou en partie, sous quelque forme que ce soit.

• Comment Étirer une Image d’Arrière-Plan pour Remplir Tout le Site Web (ou une Colonne de celui-ci) (HTML / CSS)
• Comment Centrer un Bloc DIV en Utilisant CSS
• Comment Centrer une Image avec CSS
• Comment Créer une Boîte Rectangulaire pour Contenir Votre Texte / Vos Images avec CSS
• Comment Créer des Coins Arrondis pour votre Bordures de boîte en CSS
• Comment Ajouter une info-bulle en HTML/CSS (Pas besoin de JavaScript)
• Comment Enregistrer Votre Propre nom de domaine
• Pouvez-vous enregistrer un nom de domaine directement auprès de l’ICANN au lieu de passer par un intermédiaire ?

Nouveaux articles

• Comment Donner aux Lignes Alternatives d’une Table une Couleur Différente (HTML / CSS)
• Comment Générer le Certificat SSL Gratuit Let’s Encrypt sur Votre Propre Ordinateur (Windows)
• Comment Insérer des Balises Meta dans une Page Web avec BlueGriffon
• Comment Jouer une Chanson (ou Un Autre Clip Audio) d’une Liste sur un Site Web
• Comment Dessiner une Ligne Horizontale sur une Page Web avec Expression Web
• Comment Créer un Site Web Gratuitement
• Pourquoi Ne Puis-je Pas Créer le Domaine Que Je Veux? Existe-t-il un moyen de supprimer complètement un registraire?
• Quelle est la différence Entre un Registraire de noms de domaine et un Hébergeur ?
• Comment créer un Site Web adapté aux Mobiles : Responsive Design en CSS
• Quelle est la Différence Entre un Système de Gestion de Contenu (CMS), un Blog, un Éditeur Web et un Créateur de Site en Ligne ?

Articles populaires

• Comment créer un Blog
• Comment Créer / Créer un Site Web : Le Guide A-Z du Débutant
• Conseils pour Choisir un Bon nom de domaine
• Tutoriel Web d’Expression: Comment concevoir un site Web avec Microsoft Expression Web
• Tutoriel Dreamweaver: Comment Concevoir un site Web avec Dreamweaver CS6
• Tutoriel BlueGriffon: Comment Concevoir un site Web avec BlueGriffon 3
• Comment Concevoir et publier votre site Web avec KompoZer (éditeur Web WYSIWYG gratuit)
• Assistant de Formulaire de commentaires / Contact gratuit

Comment créer un Lien vers cette Page

Il apparaîtra sur votre page comme suit:

Comment Faire Pivoter une Image sur un Site Web Lorsqu’elle est Visualisée sur un Téléphone Mobile (CSS)