Problèmes avec les barres de défilement sur Redimensionner l'image lorsque vous essayez d'ajustement à l'écran sans déformer

StackOverflow https://stackoverflow.com/questions/6818096

Question

Je suis en train de faire une sorte de plein écran de l'effet , mais je je suis à avoir des doutes quant à la façon de le faire. Comme on peut le voir de mon exemple du violon, je veux l'image soit aussi grande que possible sans la déformer (en forme à l'écran). Je veux aussi qu'il soit centré verticalement et horizontalement.

Horzontal centrant est pris en charge dans css, mais je l'ai dû utiliser JavaScript pour le centrage vertical.

Mes questions sont les suivantes:

  1. Y at-il une meilleure façon de faire tout cela (par exemple tout en CSS)?
  2. Lors de la première charge, si l'image (avant qu'il ait été mis à l'échelle) est plus large que la fenêtre, une barre de défilement est présent alors que mon script calcule la hauteur de la fenêtre. Cela signifie que lorsque mon script correspond à la div et img à la fenêtre, il y a un espace blanc au fond, qui est la hauteur de la barre de défilement. Je peux contourner ce problème en spécifiant overflow: hidden, mais il semble un peu d'un travail autour. Est-il possible de mieux? Would BASCULEMENT l'image mieux?
  3. Quand je remets à la côte de sorte que la div est plus large que l'image, je reçois une section blanche sous la div noir, ce qui crée une barre de défilement vertical. Encore une fois, je peux me débarrasser de cela avec trop-plein: caché, mais je ne aime pas cette approche. Je veux savoir pourquoi il est là et comment vous en débarrasser?
  4. Parfois je peux apparaître faire une barre de défilement horizontale et que je remets à la côte il clignote marche / arrêt. overflow: hidden corrige ce problème, mais je veux une solution de nettoyage
    5. .
  5. Y at-il de meilleures façons de coder cela, ou peut mon jQuery / Javascript optimiser plus loin?
Était-ce utile?

La solution

Eh bien ... que les difficiles. La meilleure façon que j'ai trouvé comment le faire est de mettre réellement votre contenu dans une table de cellule et définissez les propriétés et vertical- horizontal Aligne au centre .... milieu je pense? Mais de toute façon, il peut être fait. Je vais jouer avec elle et voir si je peux obtenir un exemple ensemble.

EDIT:

Ok, donc la première chose que je conseillerais est de laisser le navigateur des choses proportionnellement Redimensionner. Vous n'avez pas besoin de redimensionner la div, juste l'image. Vous pouvez laisser la figure du navigateur sur l'alignement vertical et, ce qui est une option beaucoup mieux que le calculer. Cela peut être fait en plaçant le contenu dans une table de cellule. Le code exemple ci-dessous est pur html et css. Vous pouvez ajouter quelque chose à l'effet que vous avez déjà changer la hauteur de l'image et la largeur entre 100% automatique et auto 100% sur la base de la hauteur img vs hauteur de la fenêtre. Espérons que cela vous est un peu plus près de votre objectif. 

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

Autres conseils

  1. Oui (pour la partie de la hauteur de 100%): html,body,div {height:100%}
  2. overflow: hidden semble gentil avec moi. D'autres solutions possibles:
    1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (document.write doit être évité cependant)
    2. <img src="" width="1" height="1" /> (c.-à-définir une petite taille par défaut -> pas de barre de défilement)
    3. suggestion @Gerben: Css max-width (le meilleur)
  3. Il semble être l'espace de la barre de défilement horizontale prendrait. Je ne reçois que ce problème à une taille spécifique + rapport aussi.
  4. Ceci est lorsque le pictureRatio est égale ou assez proche de la fullDivRatio. Je ne trouve pas hoo avec trop-plein. Caché
  5. Aucune idée, semble assez bon OMI.

Alors oui, la barre de défilement bizarre sur Redimensionnement arrive à cause de l'effet frontière, la barre de défilement apparaissent lorsque vous passez du if au else ou vice-versa.

ce jsFiddle je ne me barre de défilement horizontale, mais je reçois encore une verticale de temps en temps .

Vous pouvez faire ceci: 

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

Il est tout pur HTML et CSS. Une alternative à la réponse de Joseph d'utiliser la table si vous ne voulez pas utiliser la table dans votre structure.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top