Как сверстать такой background чтоб он был адаптивный?

Question

[Уставшая Вишенка]

нужно чтоб при изменении масштаба картинка выглядела хорошо...

сама картинка состоит из 4тырех блоков

<div class="mainSlider__imgBox">
   <div class="mainSlider__imgBoxItem"></div>
   <div class="mainSlider__imgBoxItem"></div>
   <div class="mainSlider__imgBoxItem"></div>
   <div class="mainSlider__imgBoxItem"></div>
</div>

Comments

[Антон Антон]

чем не устраивает background-position прибитый к центральным углам блоков (можно через nth-child) и background-size: contain?

теоретически возможны артефакты на стыке из-за ресайза, но нефиг было резать картинку.

[Уставшая Вишенка]

Антон Антон, я чуть - чуть подумал и все сверстал

Answer 1

[Уставшая Вишенка]

Сделал псевдо элементы разместил их в контейнерах ширина и высота каждого псевдо элемента 200% далее расположил их от центра чтоб обрезались края

Comments

[Сергей delphinpro]

Четыре белых квадрата без картинки
И поверх по центру - цельная картинка с объектом.
Конечно, при условии однородного фона.