Ajuster l'image d'arrière-plan parent div à la taille de l'image

Question

Je me demande s'il y a un moyen en CSS pour ajuster la div parent d'une image d'arrière-plan à la taille de l'image? Pour quelque raison lorsque j'utilise:

taille de fond: couverture;

Mon image devient floue car il est mis à l'échelle en quelque sorte ...

Answer 1

drôle. J'ai commencé à écrire un article sur une idée connexe l'autre jour. Vous pouvez le faire assez facilement, mais c'est contre-intuitif. Je viens de jeter ensemble un codepen demo. Voici le code CSS pertinent:

.bear { 
    position: relative; 
    width: 100%; 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82724/bear.jpg) 
       no-repeat center center; 
    background-size: cover; 
    padding-top: 56.75%; 
} 

.text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

Vous pouvez ajuster cela comme vous le souhaitez. Je l'ai mis en place pour un contenu absolument centré.

Le remplissage et les marges ont besoin d'une référence commune pour maintenir la cohérence, et cette référence est la largeur de l'élément parent. D'abord, il y a la fenêtre, puis le corps, et ainsi de suite. Chaque élément fait référence à la largeur de son parent pour déterminer ses propres marges et son remplissage.

Vous pouvez utiliser ceci à votre avantage si vous connaissez le rapport d'aspect de votre image de fond en faisant un peu de maths (vous pouvez utiliser calc() si vous voulez et n'avez pas besoin de supporter Opera Mini).

Divisez la hauteur par la largeur de l'image. Dans mon exemple, la hauteur de l'image est de 56,75% de la largeur.

Nous pouvons alors prendre ce nombre et l'appliquer soit à padding-top ou padding-bottom, et comme les échelles parentales, le rembourrage de l'enfant évoluera avec lui, en conservant le rapport d'aspect. Si vous voulez mettre des choses dans ce div, vous devez soit faire des maths ennuyeux (en soustrayant la hauteur des enfants du padding - blech!), Soit vous pouvez à la place positionner un div div. Contenu.

À ce stade, il y a beaucoup de jeu et de personnalisation selon vos besoins et vos objectifs. Une des réserves est que le contenu peut facilement déborder, donc vous voulez bien planifier, et éventuellement définir une hauteur minimale pour atténuer cela.

Answer 2

Je pense que vous pouvez utiliser la taille de fond: 100% automatique; qui ne déformera pas l'image ...