Comment faire pour que mon image de la bannière extensible pour s'adapter à la largeur de la page, si la largeur de la page dépasse la largeur de l'image?

(C'est la grande bannière verte de l'image.)

Droit maintenant, je plafonnées l'image à 2560px dans la largeur, et jusqu'à ce que le 4k révolution vient le long qui doit être fine. Mais si quelqu'un arrive à l'étirer encore plus large pour une raison quelconque (sur plusieurs écrans?) Je le veux pour ne pas répéter comme il le fait actuellement, mais l'étirement de la largeur de l'image pour s'adapter.

Est-ce possible de faire avec CSS et n'ayant pas besoin de JavaScript?

Qu'une partie de mon SASS ressemble à ceci:

.banner {
    @include box-shadow(rgba(0, 0, 0, 0.30) 0 4px 10px 0);
    background: url(../images/banner-bg.jpg);
    height: 522px;

Comment pourrais-je accomplir?

InformationsquelleAutor Doug Smith | 2013-07-19

3

Ajouter:
```
background-size: cover;
```
Cela garantit que l'image va couvrir l'ensemble de la région, dans votre cas, l'image sera presque toujours conserver sa hauteur jusqu'à ce que la largeur de la bannière devient supérieure à la largeur d'origine de l'image, puis il va commencer à se développer dans la taille correspond à la largeur. Il ne sera pas l'air parfait, si quelqu'un développe leur navigateur à cette taille, mais pas beaucoup de volonté dans cette largeur de toute façon.

http://www.css3.info/preview/background-size/

InformationsquelleAutor Godwin

Vous devez vous connecter pour publier un commentaire.