Dimensions des images dans une page html - xhtml

Fermé

isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 - 30 août 2016 à 15:55
isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 - 30 août 2016 à 18:57

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:

Dimensions des images dans une page html - xhtml
Supprimer une page word - Guide
Traduire une page web - Guide
Créer une page facebook - Guide
Page d'accueil iphone - Guide
Editeur html - Télécharger - HTML

1 réponse

Réponse 1 / 1

Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
Modifié par Fallentree le 30/08/2016 à 16:06

         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.

isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5
30 août 2016 à 16:49

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...

Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
Modifié par Fallentree le 30/08/2016 à 17:01

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

Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
30 août 2016 à 17:03

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<h1>Hello World!</h1>

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

</body>
</html>

isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5 > Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019
30 août 2016 à 18:57

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. ;-)

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

[PIX] Commencer chaque poème sur une nouvelle page

code couleur associé a une image

Discussions similaires

Newsletters