Jak mogę powiększyć element HTML w Firefoksie i Operze?


82

Jak mogę powiększyć element HTML w Firefoksie i Operze?

zoomObiekt działa w IE, Google Chrome i Safari, ale to nie działa w Firefox i Opera.

Czy istnieje metoda dodania tej właściwości do przeglądarek Firefox i Opera?


1
Odsyłam cię do tego pytania, które dość dokładnie odpowiada na twoje.
Ben

Odpowiedzi:


80

Wypróbuj ten kod, to zadziała:

-moz-transform: scale(2);

Możesz się do tego odnieść .


2
Tak, to działa doskonale. Czy jest jakaś metoda zmiany współczynnika skalowania -moz-transformacji na procent

Jest to procent w postaci dziesiętnej. (1 = 100% 2 = 200% 0,2 = 20%) Ale uważam, że możesz również użyć notacji procentowej. w3.org/TR/css3-values/#percentages
sholsinger

46
Problem z tym polega na tym, że masz elementy o stałej pozycji. Zoom działa w inny sposób niż przekształcanie skali.
Tom Roggero

3
Poza tym ... co się dzieje, gdy ff obsługuje zoom? Czy ten podwójny zoom? To nie wygląda na rozwiązanie imo.
Cory Mawhorter

nie działa to jednak w przypadku obrazka sprite, gdzie w rzeczywistości musimy powiększyć określoną część obrazu.
colin rickels

52

Zoom i skala transformacji to nie to samo. Są stosowane w różnym czasie. Powiększenie jest stosowane przed renderowaniem, transformacja - po. Rezultatem tego jest to, że jeśli weźmiesz element div o szerokości / wysokości = 100% zagnieżdżony w innym div, ze stałym rozmiarem, jeśli zastosujesz powiększenie, wszystko w wewnętrznym powiększeniu zmniejszy się lub zwiększy, ale jeśli zastosujesz, przekształć cały wewnętrzny div zmniejszy się (nawet jeśli szerokość / wysokość jest ustawiona na 100%, po transformacji nie osiągnie 100%).


35

Dla mnie to działa, aby zrównoważyć różnicę między powiększeniem a przekształceniem skali, dostosuj żądane pochodzenie:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

8

Użyj scalezamiast tego! Po wielu badaniach i testach stworzyłem tę wtyczkę, aby osiągnąć to w różnych przeglądarkach:

$.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);

Uwaga:

Stworzy opakowanie z klasą scaleContainer. Dbaj o to podczas stylizacji treści.


Możesz uczynić to jeszcze bardziej niesamowitym, obsługując szerokość obramowania skalowanego elementu ...width($(this).data('originalWidth') * x + borderWidth)
umutesen

5
zoom: 145%;
-moz-transform: scale(1.45);

użyj tego, aby być po bezpieczniejszej stronie


10
To powiększa 2x w webkicie. Pięść w zbliżeniu, druga w skali
Ales Ruzicka

5

Zmieniłbym się zoomna transformwe wszystkich przypadkach, ponieważ, jak wyjaśniają inne odpowiedzi, nie są one równoważne. W moim przypadku konieczne było również zastosowanie transform-originwłasności, aby umieścić przedmioty tam, gdzie chciałem.

To działało dla mnie w Chome, Safari i Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

1

Nie działa jednakowo we wszystkich przeglądarkach. Poszedłem do: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage i dodałem styl dla powiększenia i -moz-transform. Uruchomiłem ten sam kod na Firefox, IE i Chrome i otrzymałem 3 różne wyniki.

<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>

1

Przeklinałem to już od jakiegoś czasu. Zoom na pewno nie jest rozwiązaniami, działa w chrome, działa częściowo w IE, ale przenosi cały div html, firefox nic nie robi.

Moim rozwiązaniem, które zadziałało, było użycie zarówno skalowania, jak i tłumaczenia, a także dodanie pierwotnego wzrostu i wagi, a następnie ustawienie wysokości i wagi samego elementu div:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Oczywiście zmień je na własne potrzeby. Dało mi to ten sam wynik we wszystkich przeglądarkach.


To jedyna poprawna odpowiedź! Sama skala pozostawia nietknięty pierwotny rozmiar elementu.
Honza Zidek

1

wypróbuj ten kod, aby powiększyć całą stronę w programie Firefox

-moz-transform: scale(2);

jeśli używam tego kodu, cała strona przeskalowana za pomocą przewijania y i x nie jest odpowiednio powiększona

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

Po prostu nie możesz powiększyć swojej strony za pomocą css w przeglądarce Firefox

**


0

czy to działa poprawnie dla Ciebie? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);

0

U mnie to działa dobrze z IE10, Chrome, Firefox i Safari:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

To powiększa całą zawartość do 50%.


0

Jedyną poprawną i zgodną z W3C odpowiedzią jest: <html> obiekt i rem. transformacja nie działa poprawnie, jeśli skalujesz w dół (na przykład skala (0,5).

Posługiwać się:

html
{
   font-size: 1mm; /* or your favorite unit */
}

i użyj w swoim kodzie jednostki „rem” (w tym style dla <body>) zamiast jednostek metrycznych. „%” s bez zmian. Dla każdego tła ustaw rozmiar tła. Zdefiniuj rozmiar czcionki dla treści, która jest dziedziczona przez inne elementy.

jeśli wystąpi jakikolwiek warunek, który uruchomi zoom inny niż 1.0, zmień rozmiar czcionki dla tagu (przez CSS lub JS).

na przykład:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

To sprawia, że ​​odpowiednik powiększenia: 0.5 bez problemów w JS z clientX i pozycjonowaniem podczas zdarzeń przeciągnij-upuść.

Nie używaj „rem” w zapytaniach o media.

Naprawdę nie potrzebujesz powiększenia, ale w niektórych przypadkach może to być szybsza metoda dla istniejących witryn.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.