0

В css есть свойство zoom, оно делает то, что нужно, но нет поддержки в браузерах (в частности Firefox).

Так же есть свойство transform: scale(), но дело в том, что блок main_div становится видимым при использовании transform: scale(), чего нет при использовании свойства zoom. Мне нужно именно такое поведение

Может свойство transform: scale() можно применить таким образом, чтобы он работал как zoom?

Или какие аналоги есть у свойства zoom?

Как быть в этой ситуации?

Здесь мой код. Проверять нужно в Google Chrome, т.к. в Firefox свойство zoom не работает. https://jsfiddle.net/tj2349f5/1/

let test_button = document.querySelector('input.test_button');
test_button.addEventListener('click', () => {
  //second_div.style.transform = 'scale(0.5)';
  second_div.style.zoom = 0.5;
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    display: flex;
}

div#main_div {
  display: block;
  margin: 10px auto;
    height: 80vh;
    width: 80vw;
    background: red;
    overflow: scroll;
}


div#second_div {
    height: 3000px;
    width: 3000px;
    background: green;
  transform-origin: 0% 0%;
}
<div id='main_div'>
  <div id="second_div">Hello</div>
</div>
<input class="test_button" type="button" name="button_name" value="test">

16
  • transform: scale() и есть аналог zoom, но чтобы тебе помочь, ты должен описать, что именно ты хочешь получить в результате... Не понятно, чего ты хочешь добиться в результате
    – Air
    21 ноя 2021 в 5:08
  • Ну в Chrome zoom ведет себя абсолютно одинаково с transform:scale(0.5)
    – DiD
    21 ноя 2021 в 6:59
  • @Air когда я использую transform: scale() и уменьшаю масштаб блока second_div (зеленый), блок main_div становится видимым (он красный), если прокрутить вперед, чего нет при использовании свойства zoom. Видимо свойство zoom блок second_div (зеленый) "правильно" редактирует (подгоняет). Вот мне нужно, чтобы блока main_div не было видно при уменьшении масштаба блока second_div.
    – Manu
    21 ноя 2021 в 10:28
  • @DiD посмотрите, пожалуйста, мой пример. Если изменять стили через JavaScript, то они даже в Chrome ведут себя не одинаково. Выше в комментарии я написал в чем разница, и чего именно я хочу получить.
    – Manu
    21 ноя 2021 в 10:31
  • @Air отдельное спасибо, что поправили мой вопрос. А как Вы изменили слова, чтобы они выделялись?
    – Manu
    21 ноя 2021 в 11:09

2 ответа 2

1

Я бы решил так

let test_button = document.querySelector('input.test_button');
test_button.addEventListener('click', () => {
  span.classList.add('active');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  display: flex;
}

div#main_div {
  display: block;
  margin: 10px auto;
  height: 80vh;
  width: 80vw;
  background: red;
  overflow: scroll;
}

div#second_div {
  height: 3000px;
  width: 3000px;
  background: green;
}

span {
  transform-origin: 0% 0%;
}

.active {
  transform: scale(0.5);
}
<div id='main_div'>
  <div id="second_div"><span id="span">Hello</span></div>
</div>
<input class="test_button" type="button" name="button_name" value="test">

1
  • Спасибо. Но нужно, чтобы блок second_div изменялся так же как и содержимое, но при его уменьшении не было видно блока main_div. Со свойством zoom такой результат достигается, но это свойство не стандартизировано, а самое главное в Firefox не поддерживается. Может быть можно как-то заставить transform: scale() вести себя таким образом?
    – Manu
    21 ноя 2021 в 12:32
0

Вы можете попробовать повесить transform: scale(n) на body и затем принудительно установить ширину body так, чтобы он вписался в область видимости окна.

Например, можно отмасштабировать таким образом в 2 раза:

body {
  transform: scale(2);
  width: calc(100vw / 2);
}

Возможно, дополнительно потребуется добавить смещение:

transform: scale(2) translateX(50vw);
1
  • Я отредактировал свой вопрос, и, возможно, сейчас будет понятнее чего я хочу. Просто, я не совсем понял Ваш совет, а точнее как именно им воспользоваться. Просто в основном коде есть шапка и остальное, а этот код просто для примера
    – Manu
    20 ноя 2021 в 23:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.