web-dev-qa-db-fra.com

taille du fond: la couverture ne fonctionne pas?

Ceci est ma page http://inogroup.it/preload/index.htm

La largeur des zones d'image est sensible

Comment régler la hauteur pour être sensible aussi? Vous aimez 50% de l'écran?

Si je fais ce changement: 

.pattern{
    background-size: contain;
    margin-bottom:25px;
    width:100%;
    height:50%; 
}

ça ne fonctionne pas

Merci beaucoup!

cssheight
11
Alex

background-size: doit venir APRÈS background: je ne sais pas si cela est vrai de tous les navigateurs, mais c’est certainement une fonctionnalité de Chrome qui peut vous rendre fou.

43
MichaelClark

La hauteur de la div peut être définie à l'aide de la propriété css height ou (par défaut) à l'aide de la hauteur de ses éléments enfants. Comme les images sont définies comme images d’arrière-plan, la division n’est pas en mesure de déterminer la hauteur à partir de celle-ci. Il n’existe pas de méthode css pure permettant d’ajuster la hauteur d’une div aux dimensions d’une image d’arrière-plan. Ce que vous pouvez faire, c'est de définir les images d'arrière-plan pour qu'elles soient positionnées au centre de la div et que la taille de l'arrière-plan soit la couverture:

.pattern-container .pattern {
    background-size: cover;
    background-position: 50% 50%;
    <!-- other rules here -->
}

Si vous positionnez les images d'arrière-plan sous la forme 50% 50% verticalement et horizontalement, vous les centrez dans le div qui les contient, quelles que soient les dimensions de la div. Ceci dit, l’image elle-même peut rogner sur les bords si le format de la div est inférieur à celui de l’image (par exemple, si la div a une largeur de 30px et une hauteur de 10px, et que l’image est de 40px l'image va perdre 5 pixels des deux côtés).

3
Richard Parnaby-King

Les zones d'image sont sensibles, mais cela ne signifie pas que les images correspondantes le sont. Pour une structure plus fluide et dynamique, je vous recommande d'utiliser un framework qui fait le travail pour vous, comme Bootstrap.

Dans la dernière version de Bootstrap, vous pouvez utiliser le code suivant pour créer une image sensible (en largeur et en hauteur):

<img src="images/my_img" class="img-responsive" />

Pour que cela fonctionne, vous devrez télécharger la dernière version de Bootstrap à partir de leur site Web ( http://getbootstrap.com/ ) et faire référence à votre code.

0
Tommy Jinks