Как я могу увеличить HTML-элемент в Firefox и Opera?
В zoom
Свойство работает в IE, Google Chrome и Safari, но это не работает в Firefox и Opera.
Есть ли способ добавить это свойство в Firefox и Opera?
Как я могу увеличить HTML-элемент в Firefox и Opera?
В zoom
Свойство работает в IE, Google Chrome и Safari, но это не работает в Firefox и Opera.
Есть ли способ добавить это свойство в Firefox и Opera?
Ответы:
Масштабирование и масштабирование - это не одно и то же. Применяются в разное время. Масштаб применяется до рендеринга, трансформация - после. Результатом этого является то, что если вы возьмете div с шириной / высотой = 100%, вложенный внутри другого div с фиксированным размером, если вы примените масштабирование, все внутри вашего внутреннего масштабирования будет сжиматься или расти, но если вы примените преобразование всего внутренний div будет сжиматься (даже если ширина / высота установлена на 100%, они не будут 100% после преобразования).
Используйте scale
вместо этого! После многих исследований и тестов я сделал этот плагин кроссбраузерным:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth':$(this).width(),
'originalHeight':$(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x==1)
$(this).unwrap().css('position','static');else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
usege:
$(selector).scale(0.5);
заметка:
Он создаст оболочку с классом scaleContainer
. Позаботьтесь об этом при стилизации контента.
.width($(this).data('originalWidth') * x + borderWidth)
zoom: 145%;
-moz-transform: scale(1.45);
используйте это, чтобы быть в большей безопасности
Я бы изменил zoom
для transform
всех случаев, потому что, как объясняется другими ответами, они не эквивалентны. В моем случае также необходимо было применить transform-origin
свойство, чтобы разместить предметы там, где я хотел.
Это сработало для меня в Chome, Safari и Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
Он не работает одинаково во всех браузерах. Я зашел по адресу : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage и добавил стиль для масштабирования и -moz-transform. Я запустил один и тот же код в Firefox, IE и Chrome и получил 3 разных результата.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
Я долго ругался на это. Zoom - это определенно не решение, он работает в хроме, он частично работает в IE, но перемещает весь html div, firefox ничего не делает.
Мое решение, которое сработало для меня, заключалось в использовании как масштабирования, так и перевода, а также добавления исходной высоты и веса, а затем установки высоты и веса самого div:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Очевидно, измените их под свои нужды. Это дало мне одинаковый результат во всех браузерах.
попробуйте этот код, чтобы увеличить всю страницу в fireFox
-moz-transform: scale(2);
если я использую этот код, вся страница, масштабируемая с помощью прокрутки y и x, не масштабируется должным образом
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
Просто вы не можете масштабировать страницу с помощью css в fireFox
**
Единственный правильный и совместимый с W3C ответ: <html>
object и rem. преобразование не работает правильно при уменьшении масштаба (например, scale (0.5).
Использование:
html
{
font-size: 1mm; /* or your favorite unit */
}
и используйте в своем коде "rem" (включая стили для <body>
) вместо метрических единиц. "%" s без изменений. Для всех фонов установите размер фона. Определите размер шрифта для тела, наследуемого другими элементами.
если возникает какое-либо условие, которое должно запускать масштабирование, отличное от 1.0, измените размер шрифта для тега (через CSS или JS).
например:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Это эквивалентно масштабированию: 0,5 без проблем в JS с clientX и позиционированием во время событий перетаскивания.
Не используйте rem в медиа-запросах.
Вам действительно не нужно масштабирование, но в некоторых случаях это может быть более быстрый метод для существующих сайтов.