шкала div для сохранения соотношения сторон

Question

шкала div для сохранения соотношения сторон

0

У меня такой макет:

HTML

<div id="container">
    <div id="zoomBox">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

#container { width:100%; }
#box { height:1000px;width:920px; }

То, что я пытаюсь сделать, - это масштабировать мой контейнер и содержимое, чтобы сохранить соотношение сторон, в котором он сейчас находится. Сейчас я использую transform: scale() и он отлично работает, но у меня возникают серьезные проблемы с его работой в Internet Explorer.

Это мой код до сих пор. Есть ли у кого-нибудь какие-либо другие предложения по улучшению этой работы в IE?

function zoomProject(percent)
{
    $maxWidth = $("#container").width();

    if(percent == 0)
        percent = $maxWidth/920;

    $("#zoomBox").css({
        'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + ')',
        '-ms-transform': 'scale(' + percent + ')'
    });
}

user3566265 09 май 2014, в 19:17

Источник

0

stackoverflow.com/questions/7805870/css3-transformscale-in-ie должно помочь
Gogol 09 май 2014, в 17:36

Теги:

javascript

jquery

html

css3

internet-explorer

2 ответа

Ещё вопросы

stackoverflow.com/questions/7805870/css3-transformscale-in-ie должно помочь

ratmalwer · Answer 1 · 2014-05-09T15-19-00.000Z

Попробуйте без преобразования:

new_width = width * percent / 100;
new_height = height * percent / 100;
$("#zoomBox").css('width',new_width);
$("#zoomBox").css('height',new_height);

Blue · Answer 2 · 2014-05-09T15-04-00.000Z

У меня нет jquery, но пример с использованием raw html и javascript. Вероятно, он будет работать на IE как есть (более старый, т.е. Не использует какой-то один синтаксис, но имеет ту же функциональность), но как только вы переключите его на jquery, все должно быть хорошо.

Код:

function zoomProject(ratio) {
  var i, height;
  var boxes = document.getElementsByClassName("box");

  for (i=0;i<boxes.length;i++) {
    height = (boxes[i].offsetWidth * ratio) + "px";
    boxes[i].style.height = height;
  }
}

zoomProject(.1);

.container { background: red; width: 100%; height: 100%; }
.box { background: blue; width: 100%; border: 1px solid white;}