Javascript Изменить размер элемента

Question

У меня есть сова-карусель, которая загружается с автоматической c шириной, которая определяется размером экрана и элементами. Div .owl-stage имеет ширину, установленную при загрузке страницы, и изменяет размер при изменении размера браузера. Я получил ширину элемента .owl-stage и применил его к заголовку элемента .block, который работает нормально.

$(document).ready(function() {
  $(".block-title").css({
    'width': ($(".owl-stage").width() + 'px')
  });
});

Проблема в том, что ширина .owl-carousel изменяется, но .block-title остается установить на начальную ширину, которая устанавливается при загрузке страницы. Что нужно добавить в функцию, чтобы ширина .block-title оставалась обновленной при изменении ширины .owl-stage?

Answer 1

Вам, вероятно, придется изменить размер шрифта класса .block-title, чтобы "изменить его размер":

let fontSize = .9;
$(document).ready(function() {
  $(".block-title").css({
    'font-size': (`${fontSize}vw`)
  });
});

Установите для переменной fontSize значение десятичный, который заставляет это выглядеть правильно. Затем он должен масштабироваться до разных браузеров. Обратите внимание, что я использую vw в качестве единицы для размера шрифта. Например, vw из 1 будет иметь размер шрифта в пикселях, равный 1% ширины области просмотра. Следовательно, размер шрифта будет изменяться в зависимости от ширины области просмотра при изменении размера браузера.