Comment puis-je développer une image pour avoir la même hauteur que le div après le redimensionnement? Ou comment puis-je remplir l'espace blanc laissé par l'image avec une couleur?
Je pense que cela va vous obtenir le résultat souhaité:
<style>
div {width:50px;height:100px;}
div img {height:100%;}</style><div><imgsrc='path/to/img.gif'/></div>
L'image va maintenant remplir à la div conteneur de la taille et de l'échelle de sa largeur, avec ses proportions. Cela pourrait causer de l'image pour l'agrandir passé le div conteneur destiné à la largeur de limites mais soyez donc prudent.
J'ai utiliser la propriété background-image Autant que je sache, ce n'est pas possible avec les navigateurs actuels. pour empêcher l'image de l'expansion au-delà de la div conteneur, utilisez max-width: 100%; max-height: 100%; width: 100%; height: 100%;
div {background-image: url(path/to/image); background-size:100%}
En arrière-plan, la taille de la propriété est supporté seulement dans les nouvelles versions de Safari et d'Opera. Pour les autres navigateurs, vous pouvez remplir l'espace laissé autour de l'image avec une couleur à l'aide de la propriété background-color:
div {
background-image: url(path/to/image);
background-size:100%;
background-color:#000000;}
Ou, pour être plus clair:
div {background:#000000 url(path/to/image)no-repeat; background-size:100%}
À l'aide de ce code entraînera l'image à étirer en CSS3 navigateurs compatibles (les plus récentes de l'Opéra, Safari, et, éventuellement, Firefox). Les anciens navigateurs IE et auront l'espace autour de l'image rempli avec la couleur d'arrière-plan spécifié.
Je pense que cela va vous obtenir le résultat souhaité:
L'image va maintenant remplir à la div conteneur de la taille et de l'échelle de sa largeur, avec ses proportions. Cela pourrait causer de l'image pour l'agrandir passé le div conteneur destiné à la largeur de limites mais soyez donc prudent.
Autant que je sache, ce n'est pas possible avec les navigateurs actuels.
pour empêcher l'image de l'expansion au-delà de la div conteneur, utilisez max-width: 100%; max-height: 100%; width: 100%; height: 100%;
OriginalL'auteur Dave L
Il y a une manière de le faire en CSS3:
En arrière-plan, la taille de la propriété est supporté seulement dans les nouvelles versions de Safari et d'Opera. Pour les autres navigateurs, vous pouvez remplir l'espace laissé autour de l'image avec une couleur à l'aide de la propriété background-color:
Ou, pour être plus clair:
À l'aide de ce code entraînera l'image à étirer en CSS3 navigateurs compatibles (les plus récentes de l'Opéra, Safari, et, éventuellement, Firefox). Les anciens navigateurs IE et auront l'espace autour de l'image rempli avec la couleur d'arrière-plan spécifié.
OriginalL'auteur vamin
Définir une couleur d'arrière-plan pour le conteneur div
OriginalL'auteur rahul