Как сделать отзыв тень CSS отзывчивой?

Question

У меня есть следующая тень, примененная к SVG-изображению. Проблема в том, что когда сайт уменьшен до более низкого разрешения, тень все дальше и дальше удаляется от изображения. Фильтр тени-тени не позволяет использовать проценты.

#turqLogo img 
{ 

display: block; 
margin: auto; 
width: 4%; 
-webkit-filter: drop-shadow(.5em 0px 0px black); /* Chrome, Safari, Opera */ 
filter: drop-shadow(.5em 0px 0px black); 
} 

У кого-нибудь есть трюк, чтобы тень оставалась в том же положении, что и сайт просматривается с разными разрешениями?

Answer 1

Используйте 1vw вместо .5em.

1vw = 1% ширины окна просмотра.

-webkit-filter: drop-shadow(1vw 0px 0px black); /* Chrome, Safari, Opera */ 
filter: drop-shadow(1vw 0px 0px black); 

Пример, падение SVG тень сохраняет это расстояние при масштабировании:

Answer 2

Попытка сбросить тени в зависимости от ширины экрана с этим:

@media (min-width: 300px) { //set there your width 

display: block; 
margin: auto; 
width: 4%; 
-webkit-filter: drop-shadow(.5em 0px 0px black); /* new style here */ 
filter: drop-shadow(.5em 0px 0px black); /* new style here */ 

} 

Просто добавьте в таблицу стилей, и вы увидите, что как только страница достигнет этой минимальной ширины, она повторно применит стиль к вашему компоненту;)