गतिशील-चौड़ाई, स्थैतिक-ऊंचाई, और डीपीआर-सचेत

वेबसाइट पर प्रत्येक पोस्ट के लिए उत्तरदायी छवियों को कार्यान्वित करना, एक शीर्षलेख छवि होगी। इस छवि की चौड़ाई 100vw और 300px की ऊंचाई होगी। मैं इस छवि के कई संस्करणों को srcsetimg टैग या पूर्ण picture तत्व (इस बिंदु पर, इस सवाल पर, इस सवाल पर) के माध्यम से इस छवि के कई संस्करणों को वितरित करना चाहता हूं।गतिशील-चौड़ाई, स्थैतिक-ऊंचाई, और डीपीआर-सचेत

ऐसा करने से srcset विशेषता का उपयोग नहीं बल्कि आसान होगा:

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

समस्या पैदा होती है जब मैं अलग-अलग डिवाइस पिक्सेल अनुपात के लिए खाते में करना चाहते हैं। सबसे पहले, मान लें कि मेरे पास srcset में सूचीबद्ध सभी छवियों के 2x और 3x संस्करण हैं।

मान लें कि मेरे पास 2x320px -व्यापी व्यूपोर्ट (उदाहरण के लिए एक आईफोन 5) वाला फोन है। मैं चाहता हूं कि ब्राउजर xs_2x.jpg लोड करे। इसी प्रकार, मान लें कि मेरे पास एक वाइडस्क्रीन मॉनीटर वाला 1x डेस्कटॉप है। मैं चाहता हूं कि ब्राउजर lg.jpg लोड करे।

लेकिन अब मान लें कि मेरे पास एक बड़ा फोन है, एक 3x, 414px -व्यापी व्यूपोर्ट (यानी एक आईफोन 6 प्लस) के साथ। इस मामले में, मैं चाहता हूं कि मेरा ब्राउज़र sm_3x.jpg लोड करे। लेकिन, मेरे ब्राउज़र की संभावना sm_2x.jpg लोड हो जाएगी क्योंकि sm_2x.jpg (1536 पिक्सेल) की चौड़ाई sm_3x.jpg (2304 पिक्सेल) की चौड़ाई की तुलना में फोन की चौड़ाई (1242 पिक्सेल) के करीब है। इसके परिणामस्वरूप एक ऐसी छवि होगी जो डिवाइस पर 300px लंबा नहीं है, वेबसाइट की आवश्यकता को तोड़ देगी।

मैं गतिशील-चौड़ाई, स्थैतिक-ऊंचाई, डीपीआर-जागरूक उत्तरदायी छवियों को कैसे कार्यान्वित कर सकता हूं?

स्रोत

2015-01-29 Marcus McLean

क्या आपने मीडिया टैग का उपयोग करने में देखा है? – JaeGeeTee

@JaeGeeTee मीडिया टैग का आपका क्या मतलब है? एक सीएसएस 'मीडिया 'क्वेरी? –

हां एक @media क्वेरी। खेद है कि दिन चल रहा है के रूप में मुझे sloppier मिलता है। – JaeGeeTee

background-size: 100% cover;

यह काम करना चाहिए।

संपादित करें: यह आसान कारण यह काम करेगा क्योंकि आप इसे अकेले सीएसएस में कर सकते हैं। पृष्ठभूमि आकार उपलब्ध स्थान को कवर करेगा आलेख देखें: http://davidwalsh.name/background-size

एक सीएसएस वर्ग बनाएं: .img-resp { background-size: 100% cover; } फिर इसे अपने तत्व पर लागू करें।

स्रोत

2015-02-05 17:42:47 Knostradamus

अपने आप पर कोड ब्लॉक आमतौर पर उपयोगी उत्तर नहीं होते हैं। कृपया अपना उत्तर संपादित करें और बताएं कि आप जो कोड दिखा रहे हैं, और क्यों/कोड उस प्रश्न का उत्तर कैसे देता है। –

-1

मुझे आपकी सटीक आवश्यकता नहीं मिली।

मैं आपको अपनी आवश्यकता के लिए प्रयास करने के लिए अपना कोड देना चाहता हूं। इस कोड का प्रयास करें:

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Responsive Images</title> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
     </script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 
     </script> 
    </head> 
    <body> 

     <div class= "container-fluid"> 
     <div class="row"> 

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
    class="img-responsive"> 
      <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> --> 
     </div> 
     </div> 
     </body> 
     </html>

स्रोत

2015-02-10 03:04:24 Akilsree1

आप ध्यान में रखना चाहिए कि JPEG छवि संकल्प (डीपीआई) स्क्रीन के लिए अर्थहीन है। यहां मुख्य बात पिक्सल की कुल क्षैतिज/ऊर्ध्वाधर गिनती है।

इसलिए छवि के 1x, 2x और 3x संस्करण होंगे (डिवाइस की चौड़ाई के अनुसार!): Device - image size table

तो 1x पर नजर रखने और 3x iPhone एक ही छवि (1920 x 300px) की आवश्यकता होगी और यह srcset में कोड होगा img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

नोट: यदि आप एक साथ एक डिवाइस पर हैं, 320 पीएक्स की स्क्रीन चौड़ाई और 1 एक्स (गैर-रेटिना) डिस्प्ले है, आपको 320px की चौड़ाई वाली छवि का उपयोग करना चाहिए।

केवल पिक्सल की कुल गणना यहां महत्वपूर्ण है।

स्रोत

2015-02-11 07:41:57

गतिशील-चौड़ाई, स्थैतिक-ऊंचाई, और डीपीआर-सचेत

उत्तर

संबंधित मुद्दे