28106 sujets

CSS et mise en forme, CSS3

Bonjour et meilleurs voeux.

J'ai besoin de votre aide pour mettre en page correctement des photos JPG représentant les couvertures de livres électroniques au format Epub. La problématique est liée au ratio des différents écrans (smartphones, tablettes, liseuses) :

- 4/3
- 3/2
- 16/9
- 18/9 (pour les derniers modèles de smartphones)

Les images de couvertures mesurent 1200 × 800 pixels et sont donc au format 3/2 et concrètement ce que je voudrais :

- Pour un écran 3/2 -> aucun souci.
- Pour un écran 4/3 -> que l'image s'affiche sur toute la hauteur et donc marges blanches à droite et à gauche pour ne pas déformer (pas d'étirement horizontal).
- Pour un écran 16/9 et 18/9 -> que l'image s'affiche sur toute la largeur et donc marges blanches en haut et en bas pour ne pas déformer (pas d'étirement vertical).

J'essaie de paramétrer tout ça avec height et max-width mais selon les valeurs, ça s'affiche correctement soit sur un écran plus carré (4/3) soit sur un écran plus rectangulaire (16/9 et 18/9) que le ratio de l'image. Pour le moment, je n'ai rien paramétré, ce qui permet d'afficher l'image dans sa taille originale non zoomée en haut de l'écran (et en plein format sur une liseuse d'une définition à peu près équivalente, comme une Kindle Fire HD de 1280 × 800).

Merci de votre aide.
Modifié par Nerva (08 Jan 2018 - 14:17)
Merci pour ce lien (je ne connaissais pas l'unité vw) mais dans un epub ça risque d'être assez acrobatique. Déjà que c'est rustique, que tous les CSS ne sont pas pris en compte, qu'il faut déclarer certaines valeurs d'une certaine manière et qu'il existe des dizaines et des dizaines d'applications Android et iOS de lecture ebooks qui ne prennent pas en charge le CSS pareillement (rien que le fait de déclarer une image dans un background CSS, je ne suis même pas sûr que ça sera reconnu dans chaque appli).

Les images de couvertures (ainsi que les images pleine page le cas échéant) sont toujours problématiques. En plus de cette affaire de ratio, il y a la définition. Puisque ces images doivent s'afficher en pleine page, on pourrait être tenté d'utiliser des fichiers de grandes dimensions pour des raisons esthétiques, afin qu'agrandies elles ne soient pas pixelisées sur les écrans dont la résolution est élevée. Problème : dans bon nombre d'applications, si la taille de l'image est supérieure à la définition de l'écran, elle ne s'affiche tout simplement pas.

Pour éviter la pixelisation, on pourrait, lorsque l'image ne comprend pas de photo, utiliser un fichier SVG, avec un fond coloré, des textes et éventuellement quelques formes pour agrémenter le tout. Là encore, bien que le SVG soit parfaitement implémenté dans les EPUB, certaines applications ne le reconnaissent pas et affichent une page blanche.