Как я могу запрограммировать кликабельный значок для изменения размера в зависимости от размера окна? ⇐ Javascript

[Гость]

Я работаю над личным проектом по замене ярлыков на сайтах Google закодированными ярлыками. Я делаю это, чтобы придать ярлыкам эффект теневого окна при наведении на них курсора. К сожалению, когда веб-сайт запускается на экранах меньшего размера или с меньшим разрешением, размер ярлыков не изменяется. Мне нужен совет, как реализовать это, не разрушая текущий код, который я установил.

Изменить изображение при наведении курсора в CSS .карта { переход: box-shadow .3s; ширина: 155 пикселей; высота: 48 пикселей; поле: 1 пиксель; граница-радиус: 1px; плыть налево; фон: URL("https://drive.google.com/uc?export=view ... sxcmxa5OWG") без повтора; box-shadow: 0 0 15px rgba(0,0,0,0.2); фоновая позиция: слева; положение: относительное; } .card:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); ширина: 155 пикселей; высота: 48 пикселей; }