Как развернуть обрезанное изображение в коробку?
Вы можете переключить библиотеку на socket.io , они уже решают эту проблему, используя redis-адаптер для socket.io Socket.IO Redis
Запустив socket.io с адаптером socket.io-redis, вы можете запускать несколько экземпляров socket.io в разных процессах или серверах, которые могут передавать и передавать события друг другу.
1 ответ
Для этого используйте фон и настройте background-size / background-position:
#top-image {
display: block;
/*clip-path: inset(0px 103px 45px 105px);*/
width: 1200px;
height: 1000px;
background-image:url(https://picsum.photos/1200/1000?image=0);
background-size:
calc(100% + 103px + 105px) /*100% of the width + the cropped part*/
calc(100% + 45px); /*100% of the height + the cropped part*/
background-position:
-103px /*we shift to the left to crop the 103px*/
0; /*we keep at the top and the bottom will be cropped*/
}<div id="top-image"></div>будет обрезать пиксель на основе контейнера. Если вам нужно обрезать изображение по размеру изображения, сделайте следующее:
#top-image {
display: block;
/*clip-path: inset(0px 103px 45px 105px);*/
width: 1200px;
height: 1000px;
background-image:url(https://picsum.photos/750/500?image=1069);
background-size:
calc(750px*(1200/(750 - 103 - 105)))
calc(500px*(1000/(500 - 45)));
background-position:
calc(-103px*(1200/(750 - 103 - 105)))
0;
}<div id="top-image"></div> Ваше изображение имеет высоту из 500px, и вы хотите обрезать 45px, таким образом, у нас будет 455px, который должен покрыть 1000px, поэтому нам нужно умножить на 1000/455. Та же логика с шириной. Для позиции нам нужно сместить на 103px урожай с учетом того же умножения.
Мы также можем написать это по-другому.
Я буду использовать изображение ниже (300x150), которое обрежу 100px слева, 60px справа, 10px сверху и 45px снизу. Затем он покроет контейнер размером 400x200. Мы должны видеть только желтую часть.
.image {
display: block;
margin:5px;
width: 400px;
height: 200px;
background-image:url(https://i.stack.imgur.com/Xde45.png);
background-size:
calc(300px*(400/(300 - 100 - 60)))
calc(150px*(200/(150 - 10 - 45)));
background-position:
calc(-100px*(400/(300 - 100 - 60)))
calc(-10px *(200/(150 - 10 - 45)));
}
.alt {
background-size:
calc(100% + (100 + 60)*(400px/(300 - 100 - 60)))
calc(100% + (45 + 10) *(200px/(150 - 10 - 45)));
background-position:
calc(-100*(400px/(300 - 100 - 60)))
calc(-10 *(200px/(150 - 10 - 45)));
}
.alt2 {
--c-left:100; /*crop left*/
--c-right:60; /*crop right*/
--c-bottom:45; /*crop bottom*/
--c-top:10; /*crop top*/
--c-x:calc(var(--c-right) + var(--c-left));
--c-y:calc(var(--c-top) + var(--c-bottom));
background-size:
calc(100% + var(--c-x)*(100%/(300 - var(--c-x))))
calc(100% + var(--c-y)*(100%/(150 - var(--c-y))));
background-position:
calc(-1*var(--c-left)*(400px/(300 - var(--c-x))))
calc(-1*var(--c-top) *(200px/(150 - var(--c-y)))) ;
}<div class="image"></div>
<div class="image alt"></div>
<div class="image alt2"></div>Мы можем взять последнее Синтаксис и считать более переменным, чтобы иметь более динамичный и отзывчивый:
.image {
display: block;
margin:5px;
width: var(--w,400px);
height: var(--h,200px);
background-image:url(https://i.stack.imgur.com/Xde45.png);
--c-left:100; /*crop left*/
--c-right:60; /*crop right*/
--c-bottom:45; /*crop bottom*/
--c-top:10; /*crop top*/
--c-x:calc(var(--c-right) + var(--c-left));
--c-y:calc(var(--c-top) + var(--c-bottom));
background-size:
calc(100% + var(--c-x)*(100%/(300 - var(--c-x))))
calc(100% + var(--c-y)*(100%/(150 - var(--c-y))));
background-position:
calc(-1*var(--c-left)*(var(--w,400px)/(300 - var(--c-x))))
calc(-1*var(--c-top) *(var(--h,200px)/(150 - var(--c-y)))) ;
}<div class="image"></div>
<div class="image" style="--w:200px;--h:100px;"></div>
<div class="image" style="--w:150px;--h:150px;"></div>