web-dev-qa-db-fra.com

Image réactive plein écran et centré - conserve les proportions, ne dépasse pas la fenêtre

Je veux donc qu'une img soit affichée 

  • aussi grand que possible (remplir la largeur quand il est paysage/hauteur quand c'est portrait)
  • pas de récolte
  • pas de biais ou d'étirement (format d'image original)
  • centré verticalement et horizontalement

De plus, la taille originale de l'image n'est pas connue.

J'ai essayé pas mal d'options différentes pour cela, y compris une option de boîte flexible (pour obtenir le centre vertical), mais rien ne semble cocher toutes les cases.

Idéalement, j'aimerais bien que ce soit une solution entièrement CSS, mais je me suis également intéressé à certains JS.

Merci

csscss3responsive-design
28
sanjaypoyzer

jsFiddle Demo

Cliquez ici pour afficher le texte complet: Absolutní centrování .

Aby to byco co největší, uveďte max-width a max-height100%.

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}
72
Itay

Vous pouvez utiliser une div avec une image d’arrière-plan et cette propriété CSS3:

background-size: contain

Vous pouvez consulter un exemple sur:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

Pour citer Mozilla:

La valeur contient spécifie que, quelle que soit la taille de la zone contenue, l'image d'arrière-plan doit être mise à l'échelle afin que chaque côté soit aussi grand que possible sans dépasser la longueur du côté correspondant du conteneur.

Cependant, gardez à l'esprit que votre image sera redimensionnée si la variable div est plus grande que votre image d'origine.

3
dcro

Après beaucoup d'essais et d'erreurs, j'ai trouvé que cela résolvait mes problèmes. Ceci est utilisé pour afficher des photos sur un téléviseur via un navigateur.

  • Il garde le rapport d'aspect des photos
  • Échelles verticales et horizontales
  • Centre verticalement et horizontalement 

  • La seule chose à surveiller sont des images très larges. Elles s’étirent bien pour être remplies, mais pas beaucoup, les photos standard ne sont pas modifiées.

    Essaie :)

* seulement testé en chrome jusqu'à présent

HTML:

<div class="frame">
  <img src="image.jpg"/>
</div>

CSS:

.frame {
  border: 1px solid red;

  min-height: 98%;
  max-height: 98%;
  min-width: 99%;
  max-width: 99%;

  text-align: center;
  margin: auto;
  position: absolute;
}
img {
  border: 1px solid blue;

  min-height: 98%;
  max-width: 99%;
  max-height: 98%;

  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
1
James Siebert