фоном-клип с фоном размер крышка клювом крышка?

Question

У меня есть div с фоновым изображением. Я хочу, чтобы изображение всегда имело по крайней мере 1% левого и нижнего полей/отступов. Контейнер div - это динамически абсолютно позиционируемая коробка, размер которой может составлять 5% или 95% (и все, что связано с переходом CSS).

Я решил достичь этого, поставив фоновое изображение на этот div, который имеет минимальную высоту 5% и ширину 100%. Фон не повторяется, не центрируется и не устанавливается внутри области (background-size: содержать). Я решил пойти с 1% -ным дополнением и фоном-CSS-свойством CSS в контент-бокс, что должно означать, что фон охватывает только контент, который начинается на расстоянии 1% от границы. Я выбрал padding, а не margin, потому что размер окна установлен в border-box, поэтому ширина 100% с дополнительным дополнением не увеличивала бы размер div, что не соответствует марже.

Однако это не сработало так, как ожидалось: При использовании фонового клипа: контент-бокс вместе с фоном-размером: содержать, фон содержится в рамке-рамке, а не в блоке содержимого, а отступы удаляются области между контентом и границей. Пример:

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>

Так вопросы:

1. Это нормальное поведение?
2. Где это задокументировано?
3. Каким будет решение для достижения того, что мне нужно?

p.s. Я не английский, поэтому я извиняюсь за возможные ошибки или заблуждения. Также я попытаюсь объяснить лучше, если вы не поняли проблему.

Answer 1

1. Да, это нормальное поведение. content-box не означает, что размер изображения внутри него, это означает, что он обрезается им.

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

3. В примере ниже я использовал псевдо класс для достижения этой цели

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>