Comment définir la largeur et la hauteur de l'image à 100% avec CSS?

Question

Mon code:

background:url(images/menu_edu.jpg) no-repeat; 

Mais seulement la moitié de l'image s'affiche.

Answer 1

L'élément qui a l'arrière-plan doit être la taille de l'image.

dire flower.jpg = 255px x 55px

<div class="flower"> 
    Some text 
</div> 

.flower { 
    background: url(flower.jpg) no-repeat; 
    width: 255px; 
    height: 55px; 
} 

La taille de l'élément ne peut pas être réglé sur les dimensions de l'image si vous utilisez un arrière-plan. Vous pouvez cependant utiliser javascript pour calculer les dimensions. Si vous avez besoin de répéter l'image, vous pouvez également utiliser répéter, répéter-x ou répéter-y sur la balise d'arrière-plan.

Answer 2

Vous ne montrez pas assez de code, mais si l'image d'arrière-plan est dans l'élément body, elle ne s'étend probablement pas sur la totalité de la fenêtre.

Essayez

html, body { min-height: 100% } 

Answer 3

Si vous voulez juste pour afficher une image, l'IMG-tag est beaucoup plus utile et efficace ... (et il pourrait être réglé à la largeur (/ &) Hauteur = 100%).

Answer 4

Si vous souhaitez afficher votre image en taille réelle, pas besoin d'utiliser CSS pour cette

Ne pas donner de la hauteur et l'attribut largeur à la balise <img> comme <img src="this.jpg" />, il affiche en taille

Mais si vous voulez que votre <div> affiche son arrière-plan en taille réelle, alors il n'y a pas d'autre choix que d'assigner les dimensions exactes de l'image