मेरे पास एक छवि है, आकार में 320 x 240 पिक्सेल, जिसे मैं एक वेब पेज पर आकार में दोगुना (यानी 640 x 480 पिक्सेल) प्रदर्शित करना चाहता हूं। अतीत में, मैंने width=640 को img टैग पर सेट करके ऐसा किया है।

हालांकि, मैंने अभी निम्नलिखित HTML विनिर्देश में:

आयाम विशेषताओं का उपयोग छवि को फैलाने के लिए नहीं किया जाता है।

उस स्थिति में, मैं किसी वेब पेज पर किसी छवि के आकार को दोगुना कैसे कर सकता हूं, बिना कल्पना के क्या करना चाहता है?

21
user200783 2 अप्रैल 2018, 19:25

16 जवाब

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

आप इसके बजाय सीएसएस का उपयोग कर सकते हैं। चौड़ाई या scale का उपयोग करने वाली दो विधियां दिमाग में आती हैं परिवर्तन।

जैसे img { width: 640px; }। यह ऊंचाई निर्दिष्ट किए बिना उचित पक्षानुपात बनाए रखेगा।

img {
  width: 640px;
}
<img src="http://www.placehold.it/320x240">

जैसे img { transform: scale(2) }

img {
  transform-origin: top left;
  transform: scale(2);
}
<img src="http://www.placehold.it/320x240">
17
j08691 2 अप्रैल 2018, 16:31

आप मूल छवि कंटेनर का आयाम सेट कर सकते हैं

.imageContainer {
  width: 640px;
  height: 480px;
}

img {
  width: 100%;
  height: 100%
}
<div class="imageContainer">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div>
8
brk 2 अप्रैल 2018, 16:31

CSS ट्रिक, सिर्फ एक प्रॉपर्टी सेट करना

यदि आप CSS का उपयोग करना चाहते हैं, तो वास्तव में एक अच्छा तरीका है:

img#image_id {
    width: calc(2 * 320px);
    height: auto; /* This can be omitted */
}

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

यह एक तरह से उत्तरदायी डिजाइन के लिए उपयोगी होगा, और मुझे लगता है कि यह वास्तव में मुश्किल है!

नोट: अगर आप पैरेंट की चौड़ाई या ऊंचाई सेट करते हैं, तो यह फ्लेक्स-बॉक्स के साथ काम नहीं करता है। इस मामले में, आपको स्पष्ट रूप से चौड़ाई और ऊंचाई निर्धारित करनी होगी, या उसके लिए कोई अन्य तरकीबें होंगी; फ्लेक्स-बॉक्स पूरी तरह से अलग काम करता है।

0
MAChitgarha 18 अप्रैल 2018, 18:22

आप ट्रांसफॉर्म का उपयोग कर सकते हैं -> स्केल

img#imagId {
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari 3-8 */
    transform: scale(2);
}
0
elegant-user 18 अप्रैल 2018, 13:15

आयाम विशेषताओं का उपयोग छवि को फैलाने के लिए नहीं किया जाता है।

जैसा कि आपने पहले ही उल्लेख किया है कि चौड़ाई विशेषता का उपयोग छवि को फैलाने का इरादा नहीं है। इसलिए उस स्थिति में हमें transform: scale(2); का उपयोग करना चाहिए जो एक अच्छा विचार है लेकिन इससे अन्य सामग्री को ओवरलैप करने वाली छवि के संबंध में भी संघर्ष हो सकता है, इसलिए सबसे अच्छा विचार है कि छवि के साथ 2x चौड़ाई div का उपयोग सीएसएस संपत्ति के साथ 2x बढ़ाया जाए 'transform: scale(2);'

इसलिए: नीचे दी गई शैली का उपयोग करना एक अच्छा विचार होना चाहिए।

.img2x_container {
    width: 640px;
    height: 480px;
}

.img2x_container img {
    transform: scale(2);
}

यह उपयोग केस केवल तभी फायदेमंद होता है जब हम छवि की ऊंचाई और चौड़ाई जानते हैं।

0
Deepanshu Sukhija 18 अप्रैल 2018, 10:47

वैसे आप css का उपयोग कर सकते हैं और स्ट्रेचिंग से बच सकते हैं।

img{ width:640px; background-size: cover; height:auto;}

यह आपकी छवि को उपयुक्त ऊंचाई के साथ समान रूप से फैलाएगा। आप ऊंचाई को किसी विशिष्ट संख्या पर सेट करने का भी प्रयास कर सकते हैं।

0
Arek Zedi 18 अप्रैल 2018, 06:41

आप इसे कई तरह से कर सकते हैं। लेकिन आप जो भी करें, पहले अपनी इमेज को डाउनलोड करें कि आप किस साइज का मतलब डबल साइज से चाहते हैं अन्यथा अगर आप साइज को दोगुना करते हैं, तो यह पिक्सलेटेड हो जाता है या फीका नजर आता है।

  image{ transform: scale(2); }
  1. अपनी छवि को दोगुना करने के लिए पैमाने को बदलने का प्रयास करें

  2. सीएसएस के साथ छवि में चौड़ाई निर्धारित करने का प्रयास करें

  3. सेटएट्रिब्यूट ("चौड़ाई", "आकार") के साथ जावास्क्रिप्ट के साथ प्रयास करें

0
Jonny 17 अप्रैल 2018, 16:52

सबसे इष्टतम तरीका यह है कि अपनी साइट पर सबसे बड़ी छवि लोड करें और डाउनस्केल जहां आपको CSS के माध्यम से आवश्यकता हो।

1) आपकी छवि के लिए सर्वोत्तम गुणवत्ता, क्योंकि अपसंस्कृति छवि को विकृत करती है।

2) विभिन्न आकारों के साथ अधिक छवियों को लोड करने की आवश्यकता नहीं है

3) डाउनस्केलिंग से छवि खराब नहीं होती है और यह CSS . की कुछ पंक्तियाँ हैं

यदि आप बड़ी छवि को लोड नहीं करना चाहते हैं, तो दूसरा सबसे अच्छा और सबसे तेज़ समाधान सीएसएस के माध्यम से इसे अपस्केल करना है। चौड़ाई विशेषता अब <img> में काम नहीं करती है

0
Datsos 16 अप्रैल 2018, 08:50

आप इस तरह से उपयोगकर्ता जावास्क्रिप्ट को इस तरह से छवि आकार बदलने के लिए दोगुना कर सकते हैं

इस JsFiddle डेमो की जाँच करें

<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
    var img = $("#sky");
    // Create dummy image to get real size
    $("<img>").attr("src", $(img).attr("src")).load(function(){
        var realWidth = this.width;
        var realHeight = this.height;
        alert("Original width=" + realWidth + ", " + "Original height=" +     realHeight);
        var newWidth = realWidth * 2;
        var newHeight = realHeight * 2;
        $("#sky").width(newWidth);
        $("#sky").width(newHeight);
         alert("new Image Size" + newWidth+"x"+newHeight);
    });
});   
});
</script>
</head>
<body>
<img src="https://www.cluedin.net/images/providers/stackoverflow.png" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
    <p><button type="button">Get Original Image Size And Double it</button></p>
</body>
</html>                            
0
Rj_Innocent_Coder 12 अप्रैल 2018, 14:45

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

निम्नलिखित उदाहरण की जाँच करें:

<picture>
  <source
    sizes="(width < 32em) contain, (width >=32em) contain 80vw calc(100vh - 10em)"
    srcset="full.jpg 2048h 1024w, half.jpg 1024h, quarter.jpg 512h, eighth.jpg 256h" />
  <img src="eighth.jpg" alt="rose flower!" />
</picture>

आप अपेक्षाकृत बड़ी छवि अपलोड करते हैं, कम से कम FHD, या बड़ी, और फिर 'आकार' और 'srcset' के साथ आप इसे कॉन्फ़िगर करते हैं, जिसे स्क्रीन आकार/प्रकार के आधार पर लोड करना है। इस तरह आप किसी भी संभावित रिज़ॉल्यूशन को कवर करते हैं, छोटा या बड़ा, और आप हमेशा अपनी छवि का सबसे अच्छा संस्करण प्रदर्शित करते हैं। ठीक है, मैं इसे स्वीकार करता हूं, अपलोड करने से पहले प्रत्येक छवि में कुछ मैन्युअल श्रम कार्य होता है, लेकिन अंतिम परिणाम इसके लायक है!

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

यहाँ छवियों के बारे में एक मज़ेदार और अच्छी व्याख्या है srcset, आकार, और इसका महत्व कि हमें इसे इस तरह से करने की आवश्यकता क्यों है। srcset पर एक मजेदार लेख

0
Theodor_D. 12 अप्रैल 2018, 08:42

आम तौर पर मुझे क्लाइंट साइड तकनीकों के साथ छवियों को स्केल करने का एक तरीका प्रदान करने वाला कोई लेख नहीं मिला है (इसे ब्राउज़र का छोड़ दें तंत्र) कुछ गुणवत्ता खोए बिना।

कहा जा रहा है कि मुझे डर है कि यदि आप HTML मानक विनिर्देश सबसे अच्छा उत्तर किसी भिन्न छवि का उपयोग करना है। बैक-एंड प्रक्रिया के माध्यम से या फोटोशॉप के माध्यम से एक स्केल की गई छवि। अब यदि आप उपयोगकर्ता की स्क्रीन के अनुसार अनुकूली छवि चाहते हैं, तो संभवत: यह वास्तविक मामला है जिसे प्राप्त करने के लिए HTML मानक निम्न तरीके से है:

<picture>
 <source srcset="http://www.placehold.it/320x240" media="(min-width: 600px)">
 <source srcset="http://www.placehold.it/640x480" media="(min-width: 900px)">
 <img src="http://www.placehold.it/160x120">
</picture>
1
Anastasios Selmani 18 अप्रैल 2018, 13:34

आप इसे नीचे दिए गए दो तरीकों से हासिल कर सकते हैं।

<img class="xx" src="http://placehold.jp/150x150.png">

.xx {
zoom: 200%;
}
.xx {
 transform: scale(2);
}
1
Jaivijay 18 अप्रैल 2018, 09:48

यहां उन चीजों की सूची दी गई है जिनसे आप छवि लोड करते समय बचना चाहते हैं:

  • FOUC - जो तब होता है जब ब्राउज़र में छवि का आकार लोड करने से पहले नहीं होता है (इस मामले में) यह पूरी तरह से लोड होने तक इसके लिए कोई स्थान आवंटित नहीं करता है) या ब्राउज़र को गलत आकार बता रहा है
  • विरूपण (1:1 से भिन्न पक्षानुपात पर छवि प्रदर्शित करना)
  • पिक्सेलेशन (एक छवि को उसके मूल आकार से काफी बड़े आकार में प्रदर्शित करना)
  • पृष्ठ के आकार की तुलना में काफी बड़े मूल आकार वाली छवियों को लोड करना - वे पृष्ठ को धीमा कर देते हैं और अनावश्यक बैंडविड्थ की खपत करते हैं

उपरोक्त में से प्रत्येक से निपटने के तरीके हैं।

FOUC से बचने के लिए, कुछ तरीके हैं:

  • फ़ाइल के अलावा, छवि आकार (या अनुपात) सहेजा गया है, ताकि आप छवियों को लोड करने से पहले पृष्ठ प्रवाह में सही स्थान आवंटित कर सकें (WP बॉक्स से बाहर करता है, उदाहरण के लिए और अधिकांश थीम एफओयूसी से बचने के लिए इसका इस्तेमाल करते हैं)
  • एक कंटेनर में छवि लोड है, background-size: cover के साथ पृष्ठभूमि छवि के रूप में, इसलिए FOUC संभव नहीं है, क्योंकि दस्तावेज़ पहले से ही तत्व के आकार को जानता है, छवि लोड होने से पहले। जब कोई छवि लोड होने में विफल होती है तो इस तकनीक में टूटी हुई छवि एंकर प्रदर्शित नहीं करने का भी लाभ होता है। साथ ही, इस तकनीक का आज व्यापक रूप से पूर्ण स्क्रीन छवि लेआउट में उपयोग किया जाता है, उनमें से कुछ लंबन प्रभाव का उपयोग करते हैं। कंटेनर और छवि के बीच पहलू अनुपात अंतर के आधार पर, ऊपर/नीचे या बाएं/दाएं फसल का नुकसान है।
  • छवि को एक position:absolute केंद्रित कंटेनर में लोड करें और जब आपके पास इसका आकार हो (और दस्तावेज़ प्रवाह में सटीक स्थिति की गणना करने में सक्षम हों) तो इसके कंटेनर आकार को "डिफ़ॉल्ट" से उचित आकार में एनिमेट करते हुए इसके पैमाने को 0 से 1 तक एनिमेट करें। .

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

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

दोनों दुनिया (गति और छवि गुणवत्ता) में सर्वश्रेष्ठ प्राप्त करने के लिए एक और अच्छी और स्मार्ट तकनीक है:

  • तह के नीचे प्रत्येक छवि के लिए आनुपातिक थंबनेल संस्करण लोड करें (हाँ, वे पिक्सेलयुक्त दिखेंगे) और उन्हें .65 अस्पष्टता पर प्रदर्शित करें। देखने में स्क्रॉल करने से पहले आलसी पूर्ण आकार की छवियों को लोड करें। भले ही पिक्सेलयुक्त संस्करण थोड़ी देर के लिए दिखाई दे, फिर भी इसे पूर्ण-आकार वाले संस्करण से बदल दिया जाएगा, जिससे फ़ोकस-इन प्रभाव पैदा होगा, साथ ही अस्पष्टता को 1 में बदल दिया जाएगा। यदि आपके पास गुणवत्ता, उत्कृष्ट छवियां हैं, तो आप वास्तव में यह प्रभाव चाहते हैं (ए) क्योंकि यह उन्हें बाहर खड़ा करता है और बी) क्योंकि आप छवियों को उचित, कुरकुरा आकार में लोड करना चाहते हैं)। छवियां "जीवित" दिखेंगी और सूक्ष्म फ़ोकस प्राप्त करेंगी, जिससे आगंतुकों को अत्यधिक परिष्कृत वेबसाइट को देखने का आभास होगा।

ओवरसाइज़िंग से बचें। यहां src-set ऊपर वर्णित थंबनेल लोडर के साथ संयुक्त रूप से चलन में है। और, ज़ाहिर है: आलसी-लोडिंग। हमेशा आलसी कुछ भी तह के नीचे लोड करें। इससे बड़ा फर्क पड़ता है।

संक्षेप में, इस प्रकार आप छवियों को सही ढंग से लोड करते हैं। वास्तव में, यह एक बहुत बड़ा विषय है, मैंने अनुकूलन, रेखापुंज बनाम वैक्टर, svg's या webp प्रारूपों को छुआ तक नहीं है।

1
tao 15 अप्रैल 2018, 12:22

ऐसा करने के कम से कम 4 तरीके हैं।

1. सीधे width की विशेषता img सेट करें

सिद्धांत: छवि की चौड़ाई को संशोधित करें।

img टैग के लिए width: 640px; display: block सेट करें।

2. img को div से लपेटें

सिद्धांत: पैरेंट नोड से चौड़ाई इनहेरिट करें।

  1. डिव width: 640px
  2. आईएमजी display: block; width: 100%

3. छवि को div की पृष्ठभूमि के रूप में सेट करें

सिद्धांत: छवि अब एक img टैग नहीं है, बल्कि एक नोड की पृष्ठभूमि है।

  1. div background-image: url(), इमेज को बैकग्राउंड इमेज के रूप में इस्तेमाल करें।
  2. div background-size: {2x width} {2x height}, छवि के आकार का आकार बदलने के लिए

4. छवि को 2x . में स्केल करें

  1. transform संपत्ति को scale(2) पर सेट करें, जिसका अर्थ है कि मुझे इसका आकार इसके मूल आकार का 2 गुना चाहिए

सुझाव: साथ ही, हमें संपत्ति transform-origin को top left में सेट करने की आवश्यकता है, ताकि यह स्थिति (अपेक्षाकृत) top: 0; left: 0; से शुरू हो सके।

स्निपेट चलाएँ और एक नज़र डालें :)

.method-1 {
  display: block;
  width: 640px;
}

.method-2 {
  width: 640px;
}
.method-2 img {
  display: block;
  width: 100%;
}

.method-3 {
  width: 640px;
  height: 480px;
  background-image: url(http://www.placehold.it/320x240);
  background-size: 640px 480px;
}

.method-4 {
  transform-origin: top left;
  transform: scale(2);
}
<h1>method 1: img displays as block, width 640px</h1>
<img src="http://www.placehold.it/320x240" class="method-1" />

<br/>

<h1>method 2: parent dom width 640px, img width 100%.</h1>
<div class="method-2">
  <img src="http://www.placehold.it/320x240" />
</div>

<br/>

<h1>method 3: the img as div's background, use the background-size attribute to set 2x size.</h1>
<div class="method-3"></div>

<br/>

<h1>method 4: use CSS3 transform property to scale the image into 2x.</h1>
<p>tips: when we set `transform: scale(2);`, we also need to define the `transform-origin` property to `top left`, in order that the image will align from top to bottom as well as from left to right, or it will lost itself. LOL.</p>
<img src="http://www.placehold.it/320x240" class="method-4" />
1
Yuying Wu 14 अप्रैल 2018, 10:46

सबसे पहले मैंने एक विशिष्ट आकार के साथ divWrapper नामक एक वर्ग के साथ एक div बनाया। फिर हम अपनी छवि के लिए 100% की चौड़ाई के साथ एक वर्ग बनाते हैं (जो डिववैपर में फैला हुआ है), और ऑटो की ऊंचाई (स्वचालित रूप से उचित अनुपात में ऊंचाई रखने के लिए) जोड़ा। आप divWapper वर्ग के अनुसार छवि के आकार को समायोजित कर सकते हैं।

.divWrapper{
width:640px;
height:480px;
float:left;
}
//Now set you image class to 
.imageclass{  
width:100%
height:auto;
float:left;
}
<div class="divWrapper">
<image class="imageclass" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Picea_glauca_taiga.jpg">
<div>

यह छवि को अनुपात में रखेगा चाहे रैपर कंटेनर का आकार कितना भी हो।

एक उपयोगी नोट:

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

https://blog.online-convert.com/best-image-file-extensions/

https://www.sitepoint.com/gif-png-jpg-who-one-to-use/

3
Jonny 18 अप्रैल 2018, 13:41

CSS के माध्यम से, आदर्श रूप से एक स्टाइल शीट में, लेकिन यदि आवश्यक हो तो style विशेषता में।

उदाहरण के लिए, यहां आपका 32x32 गुरुत्वाकर्षण 128x128 तक बढ़ाया गया है:

.stretch-128 {
  width: 128px;
  height: 128px;
}
<img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&d=identicon&r=PG" class="stretch-128">

स्वाभाविक रूप से, जब भी आप इस तरह की छवि को खींचते हैं, तो गुणवत्ता को नुकसान होने की संभावना होती है।

5
T.J. Crowder 2 अप्रैल 2018, 16:29