Перевернутый отзывчивый размер для изображения

Question

Я пытаюсь использовать следующий дизайн на отзывчивом веб-сайте. Мне любопытно, есть ли способ настроить какой-то метод обратного изменения размера через jQuery/Javascript, потому что, поскольку область просмотра становится меньше, копия ответит и получит больше.

Я попытался с помощью JQuery, чтобы изменить размер изображения, но я только знаю достаточно, чтобы вручную изменить его на различных контрольных точках

Вот моя попытка решения:

var viewportWidth = $(window).width(); 

if (viewportWidth <= 768) { 
$("#curlybrace").css("width", "80px"); 
} 

Есть ли способ настроить динамическое масштабирующее изображение?

Answer 1

Попробуйте искать в CSS и медиа-запросы, похоже, что это было бы более аккуратное решение, чем попытка сделать это с помощью JS.

Answer 2

Вы бы использовать что-то вроде этого:

function resizeFn() { 
    var width = window.width(); 
    // ... 
} 

$(function() { 
    $(window).resize(resizeFn).trigger('resize'); 
}); 

не представляется возможным сделать обратное с помощью CSS, я не думаю, что (я думал, что, может быть, через известково(), но я не думаю, что это позволяет вам делайте манипуляции с подобными единицами).

Справедливое предупреждение, это не похоже на хороший дизайн, если вы не пытаетесь заставить его выглядеть орехами.