मैं फ़ायरफ़ॉक्स और ओपेरा में एक HTML तत्व कैसे ज़ूम कर सकता हूं?

Question

मैं फ़ायरफ़ॉक्स और ओपेरा में एक HTML तत्व कैसे ज़ूम कर सकता हूं?

zoomसंपत्ति IE, गूगल क्रोम और सफारी में काम कर रहा है, लेकिन यह फ़ायरफ़ॉक्स और ओपेरा में काम नहीं कर रहा।

क्या इस संपत्ति को फ़ायरफ़ॉक्स और ओपेरा में जोड़ने की कोई विधि है?

Comments

मैं आपको इस सवाल का संदर्भ देता हूं, जो आपके उत्तर का पूरी तरह से जवाब देता है।

— बेन

Answer 1

इस कोड को आज़माएं, यह काम करेगा:

-moz-transform: scale(2);

आप उल्लेख कर सकते हैं इस ।

Comments

हां यह पूरी तरह से काम कर रहा है। क्या परिवर्तन करने की कोई विधि है

यह दशमलव रूप में एक प्रतिशत है। (1 = 100% 2 = 200% 0.2 = 20%) लेकिन मेरा मानना ​​है कि आप प्रतिशत अंकन का भी उपयोग कर सकते हैं। w3.org/TR/css3-values/#percentages

— शोल्सिंगर

इसके साथ समस्या यह है, जब आपके पास निश्चित तत्व हैं। जूम ट्रांसफॉर्म स्केल से अलग तरीके से काम करता है।

— टॉम रुगरो

भी ... क्या होता है जब ff ज़ूम का समर्थन करता है? क्या यह डबल जूम होगा? यह समाधान imo जैसा नहीं लगता है।

— Cory Mawhorter

यह एक प्रेत छवि के साथ काम नहीं करता है, जहाँ हमें वास्तव में छवि के एक विशिष्ट भाग पर ज़ूम करने की आवश्यकता होती है।

— कॉलिन रिकल्स

Answer 2

ज़ूम और ट्रांसफ़ॉर्म स्केल एक ही बात नहीं है। उन्हें अलग-अलग समय पर लगाया जाता है। जूम होने से पहले ज़ूम लगाया जाता है, बदलना - बाद। इसका परिणाम यह होता है कि यदि आप चौड़ाई / ऊँचाई के साथ एक डिव लेते हैं तो = 100% किसी अन्य डिव के अंदर निहित होता है, निश्चित आकार के साथ, यदि आप ज़ूम लगाते हैं, तो आपके आंतरिक ज़ूम के अंदर सब कुछ सिकुड़ जाएगा, या बढ़ जाएगा, लेकिन यदि आप अपना संपूर्ण रूपांतर करते हैं आंतरिक विभाजन सिकुड़ जाएगा (भले ही चौड़ाई / ऊँचाई 100% पर सेट हो, वे परिवर्तन के बाद 100% नहीं होंगे)।

Answer 3

मेरे लिए यह ज़ूम और स्केल ट्रांसफ़ॉर्म के बीच अंतर को काउंटर करने के लिए काम करता है, इच्छित मूल के लिए समायोजित करें:

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

Answer 4

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। स्टाइल करते समय इसका ध्यान रखें।

Comments

आप स्केल किए गए तत्व की सीमा चौड़ाई को .width($(this).data('originalWidth') * x + borderWidth)

— संभालकर

Answer 5

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

इसका उपयोग सुरक्षित पक्ष पर करने के लिए करें

Comments

वेबकिट में यह zooms 2x। मुट्ठी से जूम, दूसरे पैमाने से

— एलेस रुज़िका

Answer 6

मैं बदल जाएगा 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;

Answer 7

यह सभी ब्राउज़रों में समान रूप से काम नहीं करता है। मैं इसके लिए गया: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage और ज़ूम और -मोज़-ट्रांसफ़ॉर्म के लिए शैली जोड़ दी। मैंने फ़ायरफ़ॉक्स, IE और क्रोम पर एक ही कोड चलाया और 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>

Answer 8

मैं इस पर थोड़ी देर के लिए शपथ ले रहा हूं। ज़ूम निश्चित रूप से समाधान नहीं है, यह क्रोम में काम करता है, यह आंशिक रूप से IE में काम करता है, लेकिन पूरे HTML डिव को स्थानांतरित करता है, फ़ायरफ़ॉक्स एक काम नहीं करता है।

मेरा समाधान जो मेरे लिए काम करता था वह स्केलिंग और अनुवाद दोनों का उपयोग कर रहा था, और मूल ऊंचाई और वजन को भी जोड़ रहा था और फिर स्वयं div की ऊंचाई और वजन निर्धारित कर रहा था:

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

स्पष्ट रूप से इन्हें अपनी आवश्यकताओं में बदलें। इसने मुझे सभी ब्राउज़रों में समान परिणाम दिया।

Comments

यह एकमात्र सही उत्तर है! स्केल अकेला अछूता तत्व के मूल आकार को छोड़ देता है।

— होन्ज़ा ज़िदेक

Answer 9

फायरफॉक्स में पूरे पृष्ठ को ज़ूम करने के लिए इस कोड को आज़माएं

-moz-transform: scale(2);

अगर मैं इस कोड का उपयोग कर रहा हूं, तो पूरा पृष्ठ y और x स्क्रॉल के साथ ठीक से ज़ूम नहीं हुआ

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

**

बस आप फ़ायरफ़ॉक्स में सीएसएस का उपयोग करके अपने पृष्ठ को ज़ूम नहीं कर सकते

**

Answer 10

क्या यह आपके लिए सही काम करता है? :

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

Answer 11

मेरे लिए यह IE10, क्रोम, फ़ायरफ़ॉक्स और सफारी के साथ अच्छा काम करता है:

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

यह सभी सामग्री को 50% तक बढ़ा देता है।

Answer 12

केवल सही और W3C संगत उत्तर है: <html> ऑब्जेक्ट और रेम। यदि आप स्केल करते हैं तो परिवर्तन सही तरीके से काम नहीं करता है (उदाहरण के लिए स्केल (0.5)।

उपयोग:

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

और <body>मीट्रिक कोड के बजाय अपने कोड "रेम" इकाई (शैलियों के लिए सहित ) में उपयोग करें। परिवर्तन के बिना "%"। सभी पृष्ठभूमि सेट के लिए पृष्ठभूमि आकार। शरीर के लिए फ़ॉन्ट-आकार निर्धारित करें, जो अन्य तत्वों द्वारा विरासत में मिला है।

अगर कोई भी स्थिति होती है जो 1.0 से अधिक ज़ूम करेगी तो टैग (सीएसएस या जेएस के माध्यम से) के लिए फ़ॉन्ट-आकार को बदल देगा।

उदाहरण के लिए:

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

यह ज़ूम के समतुल्य बनाता है: क्लाइंट के साथ JS में समस्याओं के बिना 0.5 और ड्रैग-ड्रॉप इवेंट के दौरान स्थिति।

मीडिया प्रश्नों में "रेम" का उपयोग न करें।

आपको वास्तव में ज़ूम की आवश्यकता नहीं है, लेकिन कुछ मामलों में यह मौजूदा साइटों के लिए तेज़ तरीका हो सकता है।