1
votes

élément incapable de déborder html css

Je suis nouveau dans ce css et html Récemment, j'essaie de créer un site Web simple avec une barre de navigation supérieure en haut. Cependant, je découvre que la barre de navigation supérieure ne débordera pas même si elle a été définie sur "overflow = scroll"

ci-dessous est mon code: css

  <div class="topnav">
  <input
    type="file"
    id="getval"
    style="color:#FFFFFF;  width: 200px; font-size: 8px;"
  />
  <a id="clearBut" href="">Clear</a>
  <a id="undoBut">Undo</a>
  <a id="saveBut">Save Picture</a>
  <a id="savecsvBut">Save CSV</a>
  <a id="saveJsonBut">Save JSON</a>
  <a id="showtoolbox">Toolbox</a>
</div>

html

      .topnav {
    overflow: scroll;
    background-color: #333;
  }

  .topnav a,
  .topnav input {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #4caf50;
    color: white;
  }

Cela semble correct quand je n'ai pas téléversé et affiché des images: lorsque je n'ai téléchargé aucune photo

Et ça a l'air bizarre quand je télécharge une image plus grande que la fenêtre l'affichage devient bizarre après que j'ai téléversé une photo

s'il vous plaît aider et me conseiller sur quoi faire. merci

javascript html css dom

0 commentaires

3 Réponses :

0
votes

Si le problème d'affichage est que l'image téléchargée est beaucoup plus large que le div topnav (et la fenêtre d'affichage), vous pouvez ajouter une règle css pour limiter la largeur de tout élément img : XXX

Cet exemple définirait la largeur maximale de l'image à 100% de la largeur de la fenêtre (et l'image devrait rester à l'échelle avec elle-même).

MODIFIER: Pour étirer la barre de navigation à la taille de l'image (avec ses dimensions d'origine - par exemple, si l'image est deux fois plus large que la fenêtre du navigateur, modifiez la barre de navigation pour qu'elle soit également deux fois plus large que la fenêtre du navigateur), plutôt que de modifier le CSS, je pense que vous devrez peut-être utiliser un script pour mettre à jour la largeur de la barre de navigation après le chargement de l'image.

var image = document.getElementById('uploaded-image'); //replace "uploaded-image" with the id attribute of your image element, 
                                                       //as defined in the <img> tag
image.onload = function () {
 document.getElementsByClassName('topnav')[0].style.width = image.width + "px";
}

Je vois où il est logique de supposer que le paramètre "overflow: scroll" dans le CSS accomplirait cela, mais ce paramètre est en fait interne. En d'autres termes, si la barre de navigation n'a pas de place pour afficher tout son contenu (dans ce cas, le bouton de téléchargement, "Effacer", "Annuler", "Enregistrer l'image", etc.), "débordement: défilement" indique pour vous permettre de faire défiler DANS la barre de navigation, pour voir les éléments enfants qui ont été coupés.

3 commentaires

Salut, merci pour votre réponse. Au lieu de faire en sorte que l'image reste à l'échelle, je voudrais que la fenêtre s'agrandisse pour correspondre à l'image, ce qui signifie que la dimension de l'image n'est pas affectée. Comment faire?

La solution ci-dessus doit conserver le même rapport hauteur / largeur de l'image (ce qui signifie qu'elle ne doit pas paraître étirée ou écrasée ou quoi que ce soit de ce genre). Si vous voulez que la fenêtre réelle du navigateur s'agrandisse pour s'adapter à l'image, vous pouvez utiliser window.resizeTo (largeur, hauteur), mais le détournement de la fenêtre du navigateur n'est pas vraiment une bonne pratique dans une page Web destinée à un usage général, et il est en fait désactivé dans certains navigateurs (quelqu'un d'autre l'a très bien expliqué ici: stackoverflow.com/questions/7022787/... )

Désolé si je ne comprends pas la question de quelque manière que ce soit.

0
votes

Je définirais la classe topnav à une hauteur de:

img {display: block; margin: 10px auto; max-width: 90vw; }

et l'img:

.topnav { max-height: 100vh; }

1 commentaires

0
votes

Mettez les styles ci-dessous dans votre classe d'image. J'espère que cela rendra votre image réactive

.image-class-name {
  width: 100%;
  max-width: 100%;
  height: auto;
}

0 commentaires