background-clip avec background-size cover becs cover ?

Question

J'ai un div avec une image de fond. Je veux que l'image ait toujours une marge/un bourrage d'au moins 1 % à gauche et en bas. Le conteneur de la division est une boîte dynamique à positionnement absolu qui peut avoir une taille de 5 % ou de 95 % (et tout ce qui se trouve entre les deux avec une transition CSS).

J'ai choisi d'y parvenir en plaçant l'image d'arrière-plan sur cette division qui a une hauteur minimale de 5% et une largeur de 100%. L'arrière-plan n'est pas répétitif, il est centré et défini pour être contenu dans la zone (background-size : contain). J'ai décidé d'opter pour un padding de 1 % et une propriété CSS background-clip pour content-box, ce qui devrait signifier que l'arrière-plan ne couvre que le contenu qui commence à 1 % de la bordure. J'ai choisi le padding et non la marge, car le box-sizing est défini sur border-box, donc une largeur de 100% avec un padding supplémentaire n'augmenterait pas la taille de la div, ce qui n'est pas le cas avec la marge.

Cependant, cela n'a pas fonctionné comme prévu : Lorsque vous utilisez background-clip : content-box avec background-size : contain, l'arrière-plan est contenu dans le border-box et non dans le content-box et le padding coupe les zones entre le contenu et le border. Exemple :

div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
  float: left;
  width: 200px;
  height: 200px;
}

.clipped {
  border: 1px solid blue;
  padding: 20px;
  background-clip: content-box;
}

.normal {
  border: 1px solid green;
  padding: 20px;
  background-size: contain;
}

<div class="clipped">
</div>
<div class="normal">
</div>

Les questions sont donc les suivantes :

1. Est-ce le comportement normal ?
2. Où cela est-il documenté ?
3. Quelle serait la solution pour obtenir ce dont j'ai besoin ?

p.s. Je ne suis pas anglais donc je m'excuse pour les éventuelles erreurs ou malentendus. J'essaierai également de mieux expliquer au cas où vous n'auriez pas compris le problème.

Answer 1

1. Oui, c'est un comportement normal. Le site content-box ne signifie pas que l'image est dimensionnée à l'intérieur de cette zone, mais qu'elle est coupée par celle-ci.

2. https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

3. Dans l'exemple ci-dessous, j'ai utilisé une pseudo-classe pour le faire.

   div { position: relative; float: left; width: 200px; height: 200px; border: 1px solid blue; }

   div::before { content: ''; position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg); }

   <div> </div>