मैं एक छवि कैसे बनाऊं, हमेशा एक ही फसल की ऊंचाई होती है। जैसा कि इस साइट पर http://deliciousproductions.com.au/ पर दी गई है, यह 420px अधिक है। लेकिन छवि आगे तक फैली हुई है।

यहाँ div है

<div class="dpsplash">
</div>

सीएसएस

.dpsplash {
    background-image: url('/img/banner1.png');  
    background-size: auto 800px;
    height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
}

तो यह जो करता है वह छवि को ऊँचाई प्रदान करता है ताकि जब आप पृष्ठ को क्षैतिज रूप से आकार दें तो यह उस बिंदु को स्थानांतरित न करे जहाँ आप छवि को दिव्य ऊँचाई के लिए काटते हैं, बल्कि चौड़ाई बढ़ाते हैं। Buuuut हम एक समस्या में भाग लेते हैं क्योंकि मुझे बड़े रिज़ॉल्यूशन पर पूरी चौड़ाई की ड्राइंग के लिए छवि की ऊँचाई का अनुमान लगाना होता है जहाँ पूर्ण चौड़ाई पर प्रदर्शित होने पर छवि 400px से कम नहीं होगी, क्योंकि यदि 2500x1200 की छवि पूरी चौड़ाई पर प्रदर्शित होती है फोन, यह करने से पहले अंत है, बदसूरत लग रही है।

मुझे लगता है कि गणित / जावास्क्रिप्ट में ऐसा होना चाहिए कि [(वर्तमान पृष्ठ चौड़ाई) / (छवि चौड़ाई)] * (छवि ऊँचाई) = (वह ऊँचाई जिसकी आवश्यकता है) या x है, इसलिए पृष्ठभूमि-आकार की शैली {{होनी चाहिए X 0 }}

मुझे पता है कि मूल रूप से कोई जावास्क्रिप्ट नहीं है, यह बहुत भ्रामक है लेकिन मैं तर्क तर्कों को समझता हूं।

0
lopu 1 पद 2015, 17:05

2 जवाब

सबसे बढ़िया उत्तर

क्या आपका मतलब background-size: cover; है? यह क्या करता है (स्रोत):

पृष्ठभूमि की छवि को जितना संभव हो उतना बड़ा करें ताकि पृष्ठभूमि क्षेत्र पूरी तरह से पृष्ठभूमि छवि द्वारा कवर हो जाए। पृष्ठभूमि की स्थिति के भीतर पृष्ठभूमि छवि के कुछ हिस्से देखने में नहीं हो सकते हैं

1
Yoram de Langen 1 पद 2015, 14:25

हाँ, मुझे पूरा यकीन नहीं है कि आप क्या पूछ रहे हैं और आपकी टिप्पणी मेरे लिए विशेष रूप से स्पष्ट नहीं है।

इस सब से मुझे लगता है कि आप चाहते हैं कि छवि समान या उच्च संकल्प स्क्रीन पर समान दिखे? एक के लिए, यदि आप यह परीक्षण करना चाहते हैं कि उच्च डीपीआई स्क्रीन पर कैसा दिखेगा तो आप अनुमान लगाने के लिए अपने ब्राउज़र पर ज़ूम आउट कर सकते हैं। क्रोम के devtools के हिस्से के रूप में एक मोबाइल एमुलेटर भी है जो उच्च डीपीआई का अनुकरण करेगा।

आपके प्रश्न के अनुसार, यदि प्रश्न यह है कि आप पहलू अनुपात को कैसे बनाए रख सकते हैं और साथ ही छवि को 1080p की चौड़ाई 100% पर रख सकते हैं, तो एक सरल उपाय यह होगा कि एक मीडिया क्वेरी को जोड़ा जाए जो चौड़ाई को 100% स्क्रीन की चौड़ाई से अतीत में 1920 पिक्सल। जो width: 100%; जैसा दिखेगा। यदि यह आपके लिए बिल्कुल सही नहीं लगता है, तो आप 150% जैसे मान पर 100% की चौड़ाई सेट करने का प्रयास कर सकते हैं, इसलिए यह स्क्रीन के समान आकार के हिस्से को पहले की तरह लेता है। यदि वह आपका प्रश्न नहीं है और आप चाहते हैं कि छवि डीपीआई के साथ पैमाने पर हो, तो vh और vw मानों के साथ प्रयोग करें जो कि यह बस करेगा। वे व्यूपोर्ट ऊंचाई और चौड़ाई के लिए खड़े हैं। आप max-height/width और vmin/max के साथ अधिकतम चौड़ाई, ऊंचाई, vw और vh भी सेट कर सकते हैं

2
Nick Graeff 1 पद 2015, 14:29