• Bonjour Visiteur. Bienvenue sur les nouveaux forums de MacGeneration. La peinture est encore fraiche, quelques boulons doivent être resserrés, plus d’informations demain !

redimensionner image "a la volée"

symbol

Membre émérite
13 Octobre 2004
511
22
Bonjour

J'ai une image dans une div.

J'aimerais que cette image soit redimensionnée quand on reduit la fenêtre du navigateur.



voici ce qui se passe quand on reduit la fenetre


Du coup c'est moche :-/
Merci
 

pouppinou

Une vie de Chien et de Pommé, et je suis heureux !
17 Juin 2017
1 993
1 716
48
Niche.
Il faut la rendre "responsive" c'est à dire qui s'adapte au redimensionnement de la fenêtre.
Il faut donc lui appliquer un code CSS (classe) du style :
Bloc de code:
.redimensionnement {
  width: 100%;
  height: auto;
}
Ici le redimensionnement se fait autant en largeur qu'en hauteur.
 

symbol

Membre émérite
13 Octobre 2004
511
22
Comme d'hab, j'y arrive pas !
le code actuel (pris d'un site sur le net) qui affiche l'image

Bloc de code:
<style>
#imagebandeau
{
    margin-top: -10px;
}
</style>

<div  id="imagebandeau"; align="center">
<img src="http://kenopronos.free.fr/graph/bandeaunoellong2.gif" alt="" onload="logo(this)"/>
</div>

ou dois-je placer ?
Bloc de code:
.redimensionnement {
  width: 100%;
  height: auto;
}
J'ai essayé dans divers endroits, mais ca ne ressoud pas le bin's.

Merci
 
Dernière édition:

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
2 285
485
Bloc de code:
<style>
#imagebandeau
{
    margin-top: -10px;
}
.redimensionnement {
  width: 100%;
  height: auto;
}
</style>

<div  id="imagebandeau"; align="center">
<img class="redimensionnement" src="http://kenopronos.free.fr/graph/bandeaunoellong2.gif" alt="" onload="logo(this)"/>
</div>
 

symbol

Membre émérite
13 Octobre 2004
511
22
magnifique :)

Merci

Est-ce que ca marcherai aussi pour la bandeau bleu en dessous (avec le scrolling dedans) ?

 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
2 285
485
Cela s'applique pour tous les éléments ayant la classe "redimensionnement" en se basant sur la taille de l'élément l'englobant. Donc tu n'as qu'à tester ;)
 

symbol

Membre émérite
13 Octobre 2004
511
22
Après re-test ca fonctionne, mais je perds le scrolling.

 
Dernière édition:

symbol

Membre émérite
13 Octobre 2004
511
22
Et pour gerer ce probleme du scrolling avec redimensionnement de la fenetre faut parfaitement maitriser le code. :bored:

C'esst dommage, la solution était a portée de main :banghead:
 

symbol

Membre émérite
13 Octobre 2004
511
22
Voila ou j'en suis :

Y' a que la ligne bleue qui pose probleme (a cause du scrolling et la phrase "analyse des combinaisons...". Ces 2 choses n'apparaissement plus si je met '.redimensionnement'

 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
2 285
485
Le html et le css, c'est difficile à modifier sans avoir le code complet ;)

Inspire toi de quelque chose comme ceci. Met toi en mode "conception adaptative" et amuse toi à modifier la taille de la fenêtre. Il faudra sans doute rajouter du texte à la fin pour que ce soit plus visible (ou mettre en mode iPhone 8).
Bloc de code:
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Overflow</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
    <style>
    * {
      box-sizing: border-box;
    }

    *::-webkit-scrollbar {
      /* Pour ne pas afficher la barre de défilement */
      display: none;
    }

    html {
      height: 100%;
      margin: 0em;
      -webkit-text-size-adjust: 100%;
    }

    body {
      height: 100%;
      margin: 0em;

      background-color: #777;
    }

    main {
      height: 100%;
      width: 100%;
      padding: 1em;
      display: inline-block;
    }
    div.main_div {
      height: 100%;
      width: 100%;
      overflow-x: hidden;

      background-color: #AAA;
    }
    </style>
</head>
<body>
    <main>
        <div class="main_div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
<br>
<br>
Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
<br>
<br>
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
        </div>
    </main>
</body>
</html>
 

symbol

Membre émérite
13 Octobre 2004
511
22
Merci ecatomb,

Finalement, t'as toujours un pied dans mon projet, d'un manière ou d'une autre :)
 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
2 285
485
Forcément, si tu reprends le code tel quel :D
Dans mon exemple j'ai mis le padding à 1em et un background pour que ce soit bien visible. Le padding permet d'avoir une bordure. Met le à 0 :p

Pour ta barre bleue, au lieu d'avoir 100% met quelque chose de ce style (il te reste à trouver la taille à mettre au lieu de "5em"
Bloc de code:
width: calc(100%-5em);
Pour centre, via un margin auto et/ou un "text-align: center"
 

ecatomb

Membre d’élite
Club MacG
21 Septembre 2016
2 285
485
Impossible de te répondre sans voir le code html.
Vu comment tu galère à faire des modifications assez simple, tu peux très bien avoir fait des erreur dans ton code ou mis un paramètre qui ne faut pas.