web-dev-qa-db-fra.com

Image en plein écran avec balise img

J'utilise la balise img pour mes images de curseur, j'ai besoin que l'image soit pleine largeur et hauteur et centrée à l'intérieur de son 'conteneur.

Mon problème est lorsque je redimensionne la largeur de la fenêtre, mon image devient petite et sa hauteur ne suit pas la hauteur de la fenêtre. J'ai besoin du même comportement que background-size: cover mais avec la balise image .

background: url(../images/slider/002.jpg) center center; 
background-size: cover;

Si je crée l'image comme arrière-plan, tout fonctionne bien, mais pas le curseur. Je dois utiliser le <img> tag. Voici mon exemple .

htmlcssimageresponsive-designbackground-image
13
Ann Ragg

Il existe plusieurs façons de faire en sorte qu'une image recouvre une div avec la balise image, la plus simple consiste à utiliser la propriété fit-fit = comme ça:

html,body{
    margin:0;
    height:100%;
}
img{
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">

Le support du navigateur est bon pour l'ajustement d'objet (voir canIuse ) mais si vous devez prendre en charge plus de navigateurs (comme IE), vous pouvez utiliser cette technique pour centrer un image image plein écran avec le <img> tag :

  • centrage vertical et horizontal avec positionnement absolu, valeurs négatives haut, bas, gauche et droite combinées avec margin:auto;
  • l'image couvre toujours la fenêtre d'affichage avec 100% min-height et min-width

DEMO:

html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">
30
web-tiki