HTML img स्केलिंग


114

मैं HTML img टैग के साथ कुछ बड़ी छवियों को प्रदर्शित करने की कोशिश कर रहा हूं। फिलहाल वे स्क्रीन के किनारे से दूर जाते हैं; ब्राउज़र विंडो के भीतर रहने के लिए मैं उन्हें कैसे माप सकता हूं?

या इस संभावित घटना में कि यह संभव नहीं है, क्या यह संभव है कि कम से कम "यह छवि अपनी सामान्य चौड़ाई और ऊंचाई के 50% पर प्रदर्शित करें"?

चौड़ाई और ऊंचाई की विशेषताएं छवि को विकृत करती हैं - जहां तक ​​मैं बता सकता हूं, यह इसलिए है क्योंकि वे कंटेनर को समाप्त करने वाली विशेषताओं को संदर्भित कर सकते हैं, जो छवि से असंबंधित होगा। मैं पिक्सेल निर्दिष्ट नहीं कर सकता क्योंकि मुझे एक अलग पिक्सेल आकार के साथ छवियों के एक बड़े संग्रह से निपटना है। अधिकतम-चौड़ाई काम नहीं करती है।


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

1
rwallace, आप शुद्ध HTML के अलावा .net या PHP या कुछ और का उपयोग कर रहे हैं?
डोरजन

1
छवि फ़ाइल का आकार मायने नहीं रखता है, इस मामले में कोई आवश्यकता नहीं है कि मैं बैंडविड्थ के साथ मितव्ययी दिख रहा हूं। मैं PHP का उपयोग कर रहा हूं, लेकिन HTML समाधान काम करता है।
rivalace

जवाबों:


135

केवल widthया सेट करें height, और यह स्वचालित रूप से दूसरे को मापेगा। और हाँ आप प्रतिशत का उपयोग कर सकते हैं।

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


7
कृपया, कृपया, कृपया ध्यान दें कि बड़े पैमाने पर छवियों पर ऐसा करने से उन पृष्ठों के लिए लंबे समय तक डाउनलोड किया जा सकेगा जो लंबे समय तक डाउनलोड नहीं होना चाहिए। यदि संभव हो तो छवि का आकार बदलना हमेशा बेहतर होता है।
ceejayoz

धन्यवाद! यह केवल चौड़ाई को सेट करने के आपके समाधान का पता लगाता है, न केवल सही स्केलिंग के लिए काम करता है, बल्कि वास्तव में पहला भाग सिर्फ 100% चौड़ाई निर्धारित करके करता है।
rivalace

2
@ceejayoz मैं सहमत हूँ, लेकिन यह वह नहीं है जो वह पूछ रहा है।
रिडलरडेव

@ceejayoz मैं सोच रहा हूँ, इसमें अधिक समय क्यों लगता है? क्या इसे दोनों स्थितियों के लिए इसे प्रदर्शित करने का आकार बदलने की ज़रूरत नहीं है? या आप मैन्युअल रूप से वास्तविक छवि का आकार बदलने और फ़ाइल को बदलने के लिए कह रहे हैं?
अब्दुल

2
@ अब्दुल मैं कह रहा हूं कि आपकी वेबसाइट में 100x100 पिक्सेल स्लॉट में 3,000x3,000 पिक्सेल 5 एमबी छवि का उपयोग नहीं किया जाना चाहिए।
सियाजियोस


9

मुझे पता है कि यह सवाल लंबे समय से पूछा जा रहा है लेकिन आज तक इसका एक सरल जवाब है:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

Vw का उपयोगयहाँ बताता है कि चौड़ाई व्यूपोर्ट की चौड़ाई के 55% के सापेक्ष है।

आजकल सभी प्रमुख ब्राउज़र इसका समर्थन करते हैं।

इस लिंक को देखें


1
vwमेरे लिए एक जीवनसाथी था, दूसरी विधियां छवि के लिए काम नहीं करती थीं।
कैरम

6

कोई जावास्क्रिप्ट की आवश्यकता है।

IE6 इंटरनेट एक्सप्लोरर 6

प्रतिशत केवल एक तत्व की चौड़ाई के लिए काम करता है, लेकिन height:100%;सही कोड के बिना काम नहीं करता है।

सीएसएस

html, body { height:100%; } 

फिर प्रतिशत का उपयोग करना ठीक से काम करता है, और गतिशील रूप से विंडो आकार में अपडेट होता है।

<img src="image.jpg" style="height:80%;">

आपको चौड़ाई विशेषता की आवश्यकता नहीं है, चौड़ाई समानुपातिक रूप से ब्राउज़र विंडो आकार बदल जाती है।

और यह छोटा मणि, अगर छवि को छोटा किया जाता है, तो यह (अति) रुकावट नहीं दिखेगा (यह प्रक्षेप करता है)।

img { -ms-interpolation-mode: bicubic; }

प्रॉप्स इस स्रोत पर जाते हैं: अंतिम IE6 चिपसेट: 25+ इंटरनेट एक्सप्लोरर 6 बग्स को कैसे ठीक करें



2

मुझे लगता है कि सबसे अच्छा समाधान स्क्रिप्ट या स्थानीय रूप से छवियों का आकार बदलना और उन्हें फिर से अपलोड करना है। याद रखें, आप अपने दर्शकों को ज़रूरत से ज़्यादा बड़ी फ़ाइलों को डाउनलोड करने के लिए मजबूर कर रहे हैं


0

सबसे अच्छा तरीका मुझे पता है कि यह कैसे करना है:

1) स्क्रॉल करने के लिए ओवरफ्लो सेट करें और इस तरह से छवि बनी रहेगी लेकिन आप इसे देखने के लिए स्क्रॉल कर सकते हैं

2) एक छोटी छवि अपलोड करें। अब वहाँ बहुत सारे कार्यक्रम हैं जब अपलोड करते हैं (आपको इस btw करने के लिए PHP या .net जैसे कुछ की आवश्यकता होगी) तो आपके पास यह ऑटो स्केल हो सकता है।

3) इसके साथ रहना और चौड़ाई और ऊँचाई सेट करना, हालांकि यह विकृत दिखाई देगा लेकिन सही आकार अभी भी उपयोगकर्ता को पूर्ण आकार की छवि डाउनलोड करने में परिणाम देगा।

सौभाग्य!

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.