Image réactive plein écran et centré-maintenir le rapport d'aspect, ne pas dépasser la fenêtre
Donc je veux qu'un img soit affiché
- aussi grand que possible (remplir la largeur quand il est Paysage / Hauteur quand il est portrait)
- Aucune culture
- Pas de biais ou d'étirement (rapport d'aspect d'origine)
- centré verticalement et horizontalement
En outre, la taille d'origine de l'image n'est pas connue.
J'ai essayé pas mal d'options différentes pour cela, y compris une flexbox one (pour obtenir le centre vertical), mais rien ne semble cocher toutes les boîte.
Idéalement, j'aimerais que ce soit une solution tout CSS bien sûr, mais j'ai aussi regardé dans certains JS.
Merci
3 réponses
Pour le centrer, vous pouvez utiliser la technique présentée ici: centrage absolu .
Pour le rendre aussi grand que possible, donner max-width et max-height de 100%.
.className {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
overflow: auto;
}
Vous pouvez utiliser un div avec une image d'arrière-plan à la place et cette propriété CSS3:
background-size: contain
, Vous pouvez consulter un exemple:
Https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain
Pour citer Mozilla:
La valeur contain spécifie que quelle que soit la taille de la boîte contenant, l'image d'arrière-plan doit être mise à l'échelle de sorte 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 rehaussée si la div est plus grande que votre image d'origine.
yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Et assurez-vous qu'il n'y a pas de balises parent avec position: relative