View Single Post
Old 02-28-2011, 04:15 PM   #61
Coolmicro
Groupie
Coolmicro will become famous soon enoughCoolmicro will become famous soon enoughCoolmicro will become famous soon enoughCoolmicro will become famous soon enoughCoolmicro will become famous soon enoughCoolmicro will become famous soon enough
 
Coolmicro's Avatar
 
Posts: 195
Karma: 542
Join Date: Jul 2008
Device: Tablette android SmartQ T7 - Nook Touch - Pocketbook 602
Je me réponds à moi-même, pour me contredire et me préciser...

Suite à une discussion avec le spécialiste des epubs illustrés dont j'avais parlé, et à de nouveaux tests, je pense finalement qu'il faut uniquement utilisé les %, mais d'une certaine manière. En fait, il distingue 3 cas :
1 le cas général, qu'il appelle vignettes
2 le cas des images plein écran
3 les cas des images flottantes

1. Le cas général, c'est à dire tout ce qui n'est pas 2 ou 3, est défini uniquement par la largeur en %; on a donc un truc du genre:

Quote:
img.Img1 {width:x%;margin:0}
<img alt="toto.jpg" class="Img1" src="toto.jpg"/>
avec x = 100 * largeur image / (largeur page - marge gauche - marge droite)

Exemple pour une image de 10 cm de large dans une page A4 avec marges de 2,5 cm : x = 100*10/(21-2.5-2.5) = 62.50%
Faites le test : que l'image soit petite ou grande, cela fonctionne toujours bien (sauf évidemment le cas 2 ci-dessus)

2. La discussion est toujours en cours pour savoir quels sont les critères qui doivent déclencher automatiquement le plein écran, c'est à dire :

Quote:
img.ImgModeHeight {max-width:100%;height:100%;margin:0}
<img alt="toto.jpg" class="ImgModeHeight" src="toto.jpg"/>
Mon correspondant utilise pour le moment des conditions assez restrictives. Je propose pour ma part deux conditions cumulatives un peu moins restrictives; soit :
H : hauteur de l'image en cm
W1 : largeur de l'image en cm
W2 : largeur de la page en cm
H >= 1,33 * W1 (ce qui signifie rectangulaire en hauteur dans une proportion de 1,33)
et
W1>=33%*W2
Exemple: dans une page A4, une image large de 7cm et haute de 9,5cm est convertie automatiquement en plein écran.

3.
Quote:
img.Img1 {width:x%;margin:0;float:left}
<img alt="toto.jpg" class="Img1" src="toto.jpg"/>
avec x calculé de la même manière qu'au 1.

Lien vers l'ebook de Pierre Louÿs, "Bilitis", pour lequel j'ai utilisé les règles 1 et 2 ci-dessus : http://www.ebooksgratuits.com/epub/l...s_bilitis.epub

Last edited by Coolmicro; 02-28-2011 at 09:05 PM.
Coolmicro is offline   Reply With Quote