Как в css изменять zoom при изменении окна?

Question

[Марк Иваныч]

Добрый день,

Есть

<div class="wrap">
   <img src="image.gif">
</div>

в нем есть картинки и текст и фоновое изображение. Как можно уменьшать и увеличивать содержимое .wrap?

Пока как вариант вижу только:

$(document).resize(function(){
      $("body").css({ zoom: '100%'}); // вычислять %
});

Хотелось бы на css сделать

Answer 1

[Юрий Лобанов]

Используйте в качестве единиц измерения % или vw, vh. Ну а в случае с картинкой все еще проще. Кроме того Вы можете загнать картинку как фон и использовать разные варианты background-size.

upd:
Пример codepen.io/iiil/pen/pIHCG

Answer 2

[Сергей Протько]

вам надо масштабировать картинку по размеру блока? Почему бы просто картинке размер блока не выставить?

Answer 3

[Марк Иваныч]

Задал картинкам

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

картинки изменяются если родитель div имеет ширину в % , сейчас потестирую.

Zoom можно менять так, тоже не плохо работает хоть и с костылем.

$(window).resize(function() {
     // MIN = 800, MAX = 1200 по 100 бальной шкале
     var percent = Math.round(($(window).width() - 800) / (1200 - 800) * 100);
     percent = percent > 100 ? 100 : percent < 70 ? 70 : percent;

     $('html').css('zoom', percent + '%');
     console.log(percent);
});

Comments

[Юрий Лобанов]

Вы мой ответ прочитали полностью?

[Юрий Лобанов]

Добавил ссылку, посмотрите.

[Марк Иваныч]

Прочитал благодарю