4 सवाल: सीएसएस - स्क्रीन पर (जावास्क्रिप्ट के बिना) फिट करने के लिए स्वचालित रूप से छवि का आकार बदलें

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

इसलिए, मेरे पास एक कला वेबसाइट है, जिसमें प्रत्येक कार्य का अपना पृष्ठ है। कार्य ज्यादातर तस्वीरें हैं, जिसका अर्थ है कि उनके पास उच्च रिज़ॉल्यूशन हैं जो अधिकांश स्क्रीन प्रदर्शित करने में सक्षम हैं - इसलिए उन्हें बड़े पैमाने पर आकार बदलने की आवश्यकता है, जाहिर है।

कार्यों को देखने के लिए आसान बनाने के लिए, मैं उन्हें इस तरह प्रदर्शित करता हूं कि वे अधिकतर स्क्रीन (या तो आयाम में माइनस 100 पीएक्स) तक ले जाते हैं, जो भी आयाम भरने के लिए स्केलिंग अधिक सीमित है:

  • वर्क एक्स चौकोर आकार का है, और औसत मॉनीटर पर यह रिसाइज़ हो जाता है, ताकि इसकी ऊंचाई पूरे वर्टिकल स्पेस को भर दे, और इसकी चौड़ाई के अनुसार तराजू - पहलू अनुपात को संरक्षित करना
  • कार्य Y टेपेस्ट्री के आकार का है, और इसका आकार बदल जाता है, ताकि इसकी चौड़ाई पूरे क्षैतिज स्थान को भर दे, और इसका ऊर्ध्वाधर स्थान उस पहलू अनुपात से मेल खाने के लिए आकार बदल जाता है।

मैं वर्तमान में इसके लिए एक सीधी जावास्क्रिप्ट स्क्रिप्ट का उपयोग कर रहा हूं, छवि की वांछित चौड़ाई /ऊंचाई की गणना करने के लिए img टैग के onload (साथ ही जब भी विंडो का आकार बदला जाता है) पर एक फ़ंक्शन को बुलाता हूं और इसे लागू करता हूं। समस्या इसके लिए जावास्क्रिप्ट का उपयोग करने के साथ यह है कि जब छवि लोड होना शुरू हो जाती है और जब वह आकार बदल जाता है, तो बीच में देरी होती है, जो पृष्ठ को थोड़ी देर के लिए वास्तव में बदसूरत दिखती है, खासकर जब साइट को किसी गरीब को देखते हैं इंटरनेट कनेक्शन।

मेरे प्रश्न की ओर जा रहा है: शुद्ध सीएसएस में पहलू अनुपात को संरक्षित करते हुए, स्क्रीन आकार के एक निश्चित प्रतिशत में छवियों को आकार देने का एक तरीका है?

यह जवाब एक और जावास्क्रिप्ट समाधान प्रदान करता है, लेकिन मैं पसंद करूंगा यदि संभव हो तो शुद्ध सीएसएस में ऐसा करने का एक तरीका खोजें।


मेरी वर्तमान स्क्रिप्ट यह है:

function setGoodHeight (element) {
    if( on mobile ) {
        ...
    }
    else {
        height_buffer = 100
        width_buffer = 100
        height_diff_pct = element.naturalHeight / window.innerHeight
        width_diff_pct = element.naturalWidth / window.innerWidth
        if(height_diff_pct > width_diff_pct) {
            var h = element.naturalHeight;
            var w = element.naturalWidth;
            element.height = window.innerHeight - height_buffer;
            element.width = w * element.height / h;
        }
        else {
            var h = element.naturalHeight;
            var w = element.naturalWidth;
            element.width = window.innerWidth - width_buffer;
            element.height = h * element.width / w;
        }
        if(element.width < 540) {
            element.parentNode.setAttribute("style","width:" + 540 + "px");
        }
        else {
            element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
        }
    }
}
    
0
  1. क्या आपने पेंच आकार प्राप्त करने का प्रयास किया है, फिर फोटो को उस आकार में सेट करें?
    2019-05-08 16: 28: 58Z
  2. हाँ, अनिवार्य रूप से मेरी स्क्रिप्ट को window.innerWidth और window.innerHeight मिलता है, खिड़की की चौड़ाई /ऊँचाई के बीच की छवि चौड़ाई /ऊँचाई के बीच अनुपात की गणना करता है और जो भी छोटा होता है, वह पूरी छवि को समायोजित करता है। कि।
    2019-05-08 16: 37: 25Z
  3. क्या आपने CSS में vw और vh इकाइयों का उपयोग करने की कोशिश की है? 100vw = 100% of browser viewport width. height: auto; का उपयोग करने से भी पहलू अनुपात सुरक्षित रहता है।
    2019-05-08 16: 42: 51Z
  4. वर्तमान में आपके पास मौजूद HTML और कोड को पोस्ट करें।
    2019-05-08 16: 54: 52Z
  5. मैंने जावास्क्रिप्ट कोड पोस्ट किया है। HTML वस्तुतः इस मामले में केवल एक img टैग है।
    2019-05-08 16: 57: 59Z
    4 उत्तर                              4                         

    vw और CSS में vh इकाइयों का उपयोग करके आप मूल तत्वों के बजाय ब्राउज़र व्यूपोर्ट पर आधारित चीजों को आकार दे सकते हैं।

    यदि आप छवि के लिए max-width और max-height सेट करते हैं, तो यह छवि को किसी भी ब्राउज़र आकार के लिए ब्राउज़र व्यूपोर्ट आकार से बड़ा नहीं होने के लिए विवश करना चाहिए।

    #image-id {
        max-width: 80vw;
        max-height: 80vh;
    }
    
        
    0
    2019-05-08 18: 12: 59Z

    इसके लिए background-size: cover; का उपयोग कैसे करें? प्रत्येक छवि div की पृष्ठभूमि हो सकती है, जिसके बदले में निम्नलिखित गुण सेट हैं।

    1. height
    2. width
    3. background-size: cover;
    4. background: url('img.png') center center no-repeat;
    0
    2019-05-08 16: 35: 45Z
    1. क्या html के माध्यम से रनटाइम पर url प्रदान करने का कोई तरीका है? मेरे पास एक टेम्प्लेटेड। Html पृष्ठ है (इसलिए जब मैं पृष्ठ की सेवा करता हूं तो मैं छवि स्रोत भरता हूं) लेकिन एक स्थिर सीएसएस दस्तावेज़, और यह सब भरकर style विशेषता में काम नहीं किया।
      2019-05-08 17: 04: 26Z
    2. इसके अलावा जब मैंने इसका परीक्षण किया तो मुझे वह नहीं लगा जो मुझे चाहिए था। क्षैतिज स्केलिंग ने काम किया लेकिन ऊर्ध्वाधर स्केलिंग नहीं की, और छवि भी स्केल नहीं हुई, यह बस कट गया।
      2019-05-08 17: 10: 22Z

      अपनी छवियों को उनके द्वारा कंटेनर के अधिकतम 100% चौड़ाई पर होने के लिए कहें, और auto पर सेट ऊँचाई पहलू अनुपात बनाए रखेगी।

      .my-image-class {
        max-width: 100%;
        height: auto;
      }
      
          
      0
      2019-05-08 16: 37: 20Z
      1. मेरी समझ से, अगर कंटेनर यहाँ स्क्रीन की चौड़ाई थी, तो एक छवि को स्क्रीन से बड़ा होने के लिए आकार बदला जा सकता है - जबकि मैं इसे स्केल करना चाहूंगा ऊंचाई के आधार पर अगर ऐसा होता तो
        होता
        2019-05-08 16: 38: 21Z
      2. @ GreenCloakGuy कोई HTML चिह्न प्रदान नहीं किया गया है। छवियों के आसपास के तत्काल कंटेनर को वांछित चौड़ाई पर सेट किया जाना चाहिए। मेरे द्वारा प्रदान किया गया कोड छवियों के अनुरूप होने के लिए सरल और प्रभावी है।
        2019-05-08 16: 40: 42Z

        जावास्क्रिप्ट सबसे अच्छा जवाब है, लेकिन अगर आप वास्तव में केवल सीएसएस का उपयोग करना चाहते हैं तो आप प्रतिशत का उपयोग कर सकते हैं, बल्कि पीएक्स इन दिए गए कंटेनर को मापेंगे।

        .img {
        max-width:100%;  
        max-height:100%;
        

        }

        यहां एक समान प्रश्न और उत्तर दिया गया है: StackPost

            
        0
        2019-05-08 16: 53: 38Z
स्रोत रखा गया यहाँ