Le responsive n'est pas une option pour votre site internet. Et pourtant...

Maintenir le bon ratio de vos images lorsqu'elles sont réduites ou élargies par la dynamique responsive peut s'avérer être un véritable défi.

C'est pourquoi, dans cet article, nous abordons une méthode simple (avec un peu de mathématiques) pour conserver le ratio d'aspect original de vos images sur Webflow, garantissant qu'elles ne seront pas rognées ou déformées, quel que soit l'appareil utilisé

L'importance du ratio d'aspect dans le responsive design : Éviter les problèmes de recadrage

Lorsqu'une image est adaptée à différentes tailles d'écran, des problèmes de recadrage ou de déformation peuvent surgir. Ce problème, assez fréquent, compromet la qualité globale du visuel. Pour éviter ces problèmes, il est préférable de définir la taille de vos visuels - image ou vidéo - avec des ratios.

→ Pour un meilleur responsive : privilégiez l'utilisation de ratios plutôt que des tailles fixes (pixels, rem, etc)

En conservant le ratio d'aspect original, nous assurons une représentation fidèle sur tous les appareils, évitant ainsi la perte partielle de contenu du visuel potentiellement important ou la déformation de l'image.

Comment conserver le ratio d'aspect de vos images en CSS sur Webflow?

Les ingrédients :

• Un Div Block
• Un élément image
• Et, un peu de mathématiques

La recette pour une img 100% responsive ↓

1. Créez un div block: Dans Webflow, sélectionnez 'Add Elements' (Ajouter des éléments), puis choisissez 'Div Block'.
2. Modifiez la position du Div Block en 'Relative' : Dans le panneau Style, réglez la position du div block sur 'Relative'. Cette étape est indispensable car elle garantit que l'image que nous allons insérer aura sa position définie par rapport à ce Div Block, et non à la page entière.
3. Ajoutez une image : Glissez une image dans le div block. Assurez-vous de régler sa position sur 'Absolute'. Cette étape, combinée à la position 'Relative' du div block, assure que l'image se positionne par rapport au Div Block.
4. Ajustez la taille de l'image : Pour conserver le ratio d'aspect de l'image, réglez sa hauteur (height) et sa largeur (width) sur '100%' et modifiez son Fit en 'Cover'. Le Fit Cover permet à l'image de s'adapter à la taille du div block.
5. Maintenez le ratio de l'image : Pour ce faire, ajoutez un pourcentage de 'padding' intérieur à votre Div Block. Le pourcentage que vous allez utiliser dépend du ratio de votre image. Par exemple, pour un ratio de 16:9, définissez le padding à 56.25%.

💡 Comment avons-nous calculé les 56,25% ? Il s'agit du résultat de la division de 9 par 16, multiplié par 100, afin d'obtenir un pourcentage. Cela garantit que l'image conserve son ratio d'aspect original, peu importe la taille de l'écran.

Illustration du tutoriel en images

En suivant ces étapes, vos images s'adapteront parfaitement à n'importe quel appareil, sans recadrage ni déformation, tout en conservant leur ratio d'aspect original.

🎁 Pour facilement récupérer différents éléments UI avec les ratios d'images les plus demandés, vous pouvez utiliser la Relume Library →

Découvrir la Relume Library en vidéo ↗

Bonus - Conserver le ratio de vos images sur Webflow - Tutoriel Vidéo

Pour ceux qui préfèrent un format d'apprentissage plus visuel, nous avons également créé un tutoriel vidéo complet sur le même sujet. Dans cette vidéo, nous vous guidons à travers chaque étape du processus pour rendre vos images 100% responsive sur Webflow, en conservant le ratio d'aspect original.

Jetez-y un coup d'œil, et n'hésitez pas à poser vos questions dans la section des commentaires si vous rencontrez des problèmes ou avez besoin de plus d'informations.

_______

En conclusion, maintenir le ratio d'aspect de vos images lorsqu'elles sont adaptées à différentes tailles d'écran est crucial pour une expérience utilisateur optimale sur votre site Webflow. En suivant les étapes détaillées dans ce guide, vous pouvez facilement éviter les problèmes courants de recadrage ou de déformation de vos visuels.

Grâce à l'utilisation de div blocks et des positions CSS 'Relative' et 'Absolute', associées à une simple règle mathématique pour le padding, vos images conserveront leur ratio d'aspect original, quel que soit l'appareil utilisé par vos visiteurs. De cette façon, vous assurez la qualité et l'efficacité de votre design responsive.

N'oubliez pas, le responsive design n'est pas une option, mais une nécessité à l'ère du numérique. Apprenez en plus sur le responsive design avec cet article de blog.