Dimensions des images dans une page html - xhtml

isold Messages postés 57 Date d'inscription   Statut Membre Dernière intervention   -  
isold Messages postés 57 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis en train de réaliser un ebook au format .epub (c'est du XHTML zippé).
Dans ces pages XHTML il y a des images possédant, évidemment, une largeur eu une hauteur. Les attributs WIDTH et HEIGHT de la balise IMG permettent de modifier la taille de l'image.

Mon problème est le suivant :

je ne veux pas modifier la taille de l'image par rapport à sa dimension d'origine : 
<img src="../Images/img025.jpg" width="50%" height="50%">

Le code ci-dessus ramènerait l'image à la moitié de sa taille initiale.

Je souhaite adapter la taille de l'image à l'espace disponible de l'écran du lecteur d'ebook.

Je ne pense pas que ce soit une bonne idée de figer des dimensions comme ci-dessous : 
<img src="../Images/img025.jpg" width="348" height="125">

car ces dimensions seraient prises en compte que le lecteur d'ebook se trouve sur un téléphone ou sur une tablette, la taille d'écran entre les deux appareils étant significative.

Comment peut-on faire pour que l'image d'origine soit redimensionnée (réduite, voire agrandie) en fonction de l'espace disponible de l'écran de l'appareil (y compris un PC) sur lequel a été installé le lecteur d'ebook ?

NB: Bien qu'il s'agisse d'ebook, la véritable problématique se trouve dans le HTML / XHTML puisque c'est dans ce langage qu'il est conçu.

Merci beaucoup pour votre aide.

A voir également:

1 réponse

Réponse 1 / 1
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
  
         if( typeof( window.innerWidth ) == 'number' )      hauteur = window.innerHeight;
         else if( document.documentElement && document.documentElement.clientHeight )      hauteur = document.documentElement.clientHeight;


pas sur que ca t aide.
0
isold Messages postés 57 Date d'inscription   Statut Membre Dernière intervention   5
 
De toute façon merci pour ta réponse... :-)
Mais je ne vois pas comment je peux mettre du javascript comme valeur d'un attribut de balise. 
<img src="../Images/img012.jpg"
     height="javascript:if(typeof(window.innerWidth)=='number') ...;"
     ...
>

ça, je ne le sens pas et même sans essayer j'ai de sérieux doutes...
En tout cas, ça pourra peut-être me servir pour autre chose. Merci quand même...
0
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
 
sur l événement
window.onload = function() { }
onload The event occurs when an object has loaded
c est le probleme
https://www.w3schools.com/jsref/dom_obj_event.asp
0
Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention   209
  
<!DOCTYPE html>
<html>
<body onload="myFunction()">

<h1>Hello World!</h1>

<script>
function myFunction() {
    alert(" dim ="+window.innerHeight);
}
</script>

</body>
</html>
0
isold Messages postés 57 Date d'inscription   Statut Membre Dernière intervention   5 > Fallentree Messages postés 2309 Date d'inscription   Statut Membre Dernière intervention  
 
OK. C'est une idée qui mérite vraiment d'être creusée.
Je finis ce que j'ai déjà commencé, je fais un test basé sur cette idée et viendrai ici en donner le résultat.
En tout cas, merci. ;-)
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
imprimer plusieurs fois la meme photos sur la meme page
gaoule73 -
bertvert2 -

14 réponses