Ajustement automatique d'une image.
Fermésebiou1 Messages postés 22 Date d'inscription mercredi 7 octobre 2015 Statut Membre Dernière intervention 14 août 2022 - 14 août 2022 à 15:35
- Ajustement automatique d'une image.
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Message automatique thunderbird - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
- Gmail libellé automatique - Guide
8 réponses
14 août 2022 à 00:14
Hello,
Rien de compliqué, je t'invite à regarder cette page documentation / tutoriels :
https://www.w3schools.com/howto/howto_css_image_responsive.asp
14 août 2022 à 09:35
Bonjour,
Merci pour votre réponse, malheureusement je n'ai pas trouvé comment faire car je ne sais pas ou mettre la class dans ma ligne. Je vous mets ma ligne ci-dessous si vous pouvez me dire ou mettre la class ?
<button id="button" onclick="changerimage('cadre','images/ssol.PNG')">Extincteurs</button><br>
Merci d'avance,
Cordialement,
14 août 2022 à 11:48
Bonjour,
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Extincteurs</button><br>
Je pense tout de même que vous devriez revoir les bases du css (Démarrer avec CSS - Apprendre le développement web | MDN (mozilla.org))
14 août 2022 à 12:07
Merci beaucoup.
J'ai essayé partout sauf là...
J'ai commencé il y as 4 jours, je suis pas encore au point... Merci également pour le lien, je vais regarder.
Cordialement,
14 août 2022 à 12:43
Je viens de tester et j'ai encore 2 questions.
La première, j'ai mis la classe sur un seul bouton et ça redimensionne toutes les images quelques soit le bouton, est-ce normal ?
La seconde, j'ai mis "auto" dans "width" et "height" mais l'image ne s'adapte pas en fonction de l'écran que j'utilise :( j'ai 2 écrans avec des résolutions différentes, sauriez-vous comment régler le soucis ?
Merci d'avance,
Cordialement,
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
14 août 2022 à 14:48
Bonjour,
Une image s'affiche grâce à une balise <img>
Mettre la class sur le bouton ... ne sert sûrement à rien.
Par contre, le bouton semble déclencher une fonction javascript
changerimage()
Il serait donc bien de savoir ce qu'elle fait ( au niveau code).
Je pense que le premier argument doit être l' ID de l'élément qui contient l'image (dans ce cas, 'cadre' ). Ca serait donc là dessus qu'il faudrait jouer.
Tu peux aussi utiliser les outils de dev de ton navigateur internet pour examiner le code source de la page et derterminer quel element html contient ton image ( et identifier son ID et ou la/les CLASS qu'il contient )
14 août 2022 à 15:14
Je suis désolé mais je ne comprend pas trop ce que vous dites. C'est trop techniques pour mon petit niveau je crois.
Sur un autre topic on m'a fait des lignes (surement javascripts).
Ci-dessous, le code de ma page, si toutefois vous pouvez m'aider.
J'aimerais juste que l'image (quand on clique sur le bouton pour l'afficher) se redimensionne automatiquement à la place disponible sur l'écran. Mais je ne sais pas si c'est faisable.
Merci d'avance,
<html>
<head>
<title> Sous-sol </title>
<script type="text/javascript">
function changerimage(imgid,nom)
{
var img = document.getElementById(imgid);
img.src = nom;
}
</script>
<link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css">
<a href="site.html" class="topic">Accueil</a> - <a href="javascript:history.back()" class="topic">Retour</a>
</head>
<body>
<h1>Sous-sol</h1>
<div id="menu">
<p><font size="6"><span class="underline">Menu :</span></font></p>
<p>
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Extincteurs</button><br>
<button id="button" class="responsive" onclick="changerimage('cadre','images/rdc.PNG')">SSI</button><br>
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Localisation des services</button><br>
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Réseau de chauffage</button><br>
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Portes et portails</button><br>
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Climatisations</button><br>
<button id="button" class="responsive" onclick="changerimage('cadre','images/ssol.PNG')">Ascenseurs</button><br>
</p>
</div>
<div id="contenu_etage">
<p>
<img id="cadre" src="" alt="Mon image">
</p>
</div>
</body>
</html>
14 août 2022 à 15:27
C'est bien ce que je disais.
C'est sur cette item là qu'il faut appliquer ton css
<img id="cadre" src=""" alt="Mon image">
14 août 2022 à 15:30
Je viens d'enlever class="responsive" des boutons et je l'ai ajouté à la ligne que tu m'as dis.
Déjà, les images dépassent plus de l'écran, c'est super.
En revanche, peuvent-elles s'ajuster si l'écran est plus grand ? Pour rester un minimum centrées.
Cordialement,
14 août 2022 à 15:32
Faudrait voir ce que contient ton fichier css.css .. si ça se trouve, tu as des dimensions qui y sont renseignées...
Mais là, ce n'est pas mon taf...
Je t'invite fortement à te former au html et au css puis de corriger par toi même ce souci.
14 août 2022 à 15:35
Oui c'est vrai, mais j'ai besoin du site rapidement. Du coups, je le bricole et quand j'aurais un peu plus de temps j'essaierai de m'investir un peu plus sur le HMTL, CSS et javascripts.
En attendant, merci à tous ceux qui pourront m'aider et merci à jordane45 d'avoir déplacé le sujet, désolé, quand j'ai posté je ne savais pas que le CSS était plus approprié.
Cordialement,