ब्राउज़र की चौड़ाई / ऊँचाई में परिवर्तन के रूप में मैं CSS के साथ गतिशील रूप से एक छवि का आकार कैसे बदल सकता हूँ?

Question

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

फ़ायरफ़ॉक्स में यह ठीक काम करता है, लेकिन इसमें क्रोम में समस्याएं हैं: छवि हमेशा आकार नहीं देती है, यह किसी तरह खिड़की के आकार पर निर्भर करता है जब पृष्ठ लोड किया गया था।

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

इस बारे में कोई विचार कि मैं इसे और अधिक बुलेटप्रूफ कैसे बना सकता हूं? (यदि जावास्क्रिप्ट की आवश्यकता होगी तो मैं उसके साथ भी रह सकता हूं, लेकिन CSS बेहतर है।)

Comments

CSS3 मीडिया क्वेरी या जावास्क्रिप्ट का उपयोग करें। इवेंट हैंडलर को सक्रिय करें। w3schools.com/jsref/event_onresize.asp

— शाहिद

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो इस वर्ग की तरह एक क्लास जोड़ें = "img-थंबनेल"। यह सब करने के लिए Thats।

— विवेकदेव

Answer 1

यह शुद्ध सीएसएस के साथ किया जा सकता है और मीडिया प्रश्नों की आवश्यकता भी नहीं है।

छवियों को लचीला बनाने के लिए, बस जोड़ें max-width:100%और height:auto। IE7 में छवि max-width:100%और height:autoकाम करता है, लेकिन IE8 में नहीं (हाँ, एक और अजीब IE बग)। इसे ठीक करने के लिए, आपको width:auto\9IE8 के लिए जोड़ना होगा ।

स्रोत: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

सीएसएस:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

और अगर आप छवि की एक निश्चित अधिकतम चौड़ाई लागू करना चाहते हैं, तो बस इसे कंटेनर के अंदर रखें, उदाहरण के लिए:

<div style="max-width:500px;">
    <img src="..." />
</div>

यहाँ JSFiddle उदाहरण । कोई जावास्क्रिप्ट की आवश्यकता है। क्रोम, फ़ायरफ़ॉक्स और IE के नवीनतम संस्करणों में काम करता है (जो मैंने परीक्षण किया है)।

Comments

मैंने ओपेरा 11 और कुछ हालिया फ़ायरफ़ॉक्स दोनों के साथ jsfiddle लिंक का परीक्षण किया और जब यह अच्छी तरह से छवि को आकार देता है जब खिड़की सिकुड़ती है, तो ऐसा करने में विफल रहता है जब विंडो 650px से आगे बढ़ती है

— GDR

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

— कर्ट शिंडलर

ठीक है, तो मैंने गलत तरीके से मान लिया है कि यह इस सवाल का मुद्दा है, क्षमा करें।

— जीडीआर

अधिकतम-चौड़ाई को 100% पर सेट करना और ऑटो को ऊंचाई देना मेरे लिए कुछ नहीं था - मैंने वास्तव में एक कंटेनर के साथ काम किया। छवि को एक div में लपेटें, अधिकतम ऊँचाई / चौड़ाई सेट करें, और छवि (#div img {}) की चौड़ाई 100% और ऊँचाई 100% होने दें।

— मव

ये किस तरह का जादू है?! यह कमाल का है!

— लियोनार्डो वाइल्ड्ट

Answer 2

2018 और बाद में समाधान:

व्यूपोर्ट-रिलेटिव यूनिट्स के उपयोग से आपके जीवन की राह आसान हो सकती है, क्योंकि हमारे पास बिल्ली की छवि है:

अब हम पहलू कोड का सम्मान करते हुए इस बिल्ली को हमारे कोड के अंदर चाहते हैं:

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

अब तक वास्तव में दिलचस्प नहीं है, लेकिन क्या होगा अगर हम बिल्लियों की चौड़ाई को व्यूपोर्ट के अधिकतम 50% से बदलना चाहेंगे?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

समान छवि, लेकिन अब अधिकतम 50vw vw (= viewport width) की अधिकतम सीमा तक सीमित है, इसका मतलब है कि छवि प्रदान किए गए अंकों के आधार पर व्यूपोर्ट की एक्स चौड़ाई होगी। यह ऊंचाई के लिए भी काम करता है:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

यह व्यूपोर्ट की अधिकतम 20% छवि को प्रतिबंधित करता है।

Comments

धन्यवाद! जब मैं विभिन्न आकारों के साथ चित्र रखता हूं, तो मैं vh और vw का निर्धारण कैसे करूं?

— हरमन टूथ्रोट

Hi @HermanToothrot, क्या आप कह रहे हैं कि आप व्यूपोर्ट इकाइयों का उपयोग करते समय पहलू अनुपात को बनाए रखना चाहते हैं?

— रोबर्रर्ट-एस

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

— हरमन टूथ्रोट

या तो चौड़ाई: 100% और अधिकतम-ऊँचाई: 50vh या व्युत्क्रम

— roberrrt-s

@ ररबार्ट की चौड़ाई: 100% का प्रभाव नहीं दिखता है। मुझे सिर्फ वीएच का अनुमान लगाना है, मेरे मामले में 50 बहुत अधिक है और 40 सभी छवियों की ऊंचाई को अधिकतम करता है।

— हरमन टूथ्रोट

Answer 3

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

IE onresizeघटना में हर पिक्सेल परिवर्तन (चौड़ाई या ऊंचाई) पर निकाल दिया जाता है ताकि प्रदर्शन समस्या हो सके। जावास्क्रिप्ट की window.setTimeout () का उपयोग करके कुछ मिलीसेकंड के लिए आकार बदलने में देरी।

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Answer 4

दोनों को आकार बदलने की संपत्ति सेट करें। फिर आप चौड़ाई और ऊंचाई को इस तरह बदल सकते हैं:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Answer 5

क्या आप jQuery का उपयोग कर रहे हैं?

क्योंकि मैंने jQuery प्लगिंग पर जल्दी से खोज की थी और उन्हें ऐसा करने के लिए कुछ प्लगइन लगता है, इस एक को जांचें, काम करना चाहिए:

http://plugins.jquery.com/project/jquery-afterresize

संपादित करें:

यह सीएसएस समाधान है, मैं सिर्फ एक शैली = "चौड़ाई: 100%" जोड़ता हूं , और मेरे लिए कम से कम क्रोम और सफारी में काम करता है। मैं नहीं है, इसलिए, बस वहाँ परीक्षण, और मुझे पता है, यहाँ कोड है:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Comments

ऐसी सरल समस्या के लिए jQuery अनावश्यक है। जेएस की कुछ लाइनों पर 50 केबी + (संपूर्ण पुस्तकालय) लोड करना क्यों फायदेमंद होगा?

यकीन है, आप पूरी तरह से सही हैं, s why Iवह मुझसे पूछ रहा है, अगर वह jQuery का उपयोग कर रहा है क्योंकि अगर वह करता है एक अच्छा विचार हो सकता है बस प्लगइन जोड़ें!

— आर्थर नेव्स

तो जेएस के बिना यह संभव नहीं है? मुझे इस तरह का एक सरल समाधान मिल गया, जैसे कि unstoppablerobotninja.com/search/… , हालाँकि मैं पूरी तरह से इसे अपने खाके में पूरी तरह से लागू नहीं कर पाया

— depi

Answer 6

प्रारंभ में, मैं निम्नलिखित html / css का उपयोग कर रहा था:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

तब मैं जोड़ा class="img"करने के लिए <div> इस तरह:

<div class="img">
  <img src="..." />
</div>

और सब कुछ ठीक ठाक होने लगा।

Answer 7

scaleCSS के साथ छवि का आकार बदलने के लिए आप CSS3 की संपत्ति का उपयोग कर सकते हैं :

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

आगे पढ़ना :

• CSS3 के 2 डी रूपांतरण
• CSS3 होवर प्रभाव संक्रमण, रूपांतरण, एनिमेशन

Answer 8

बस इस कोड का उपयोग करें। जो सबसे अधिक भूल रहे हैं वह अधिकतम-चौड़ाई को छवि की अधिकतम-चौड़ाई के रूप में निर्दिष्ट करना है

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

इस प्रदर्शन की जाँच करें http://shorturl.at/nBKVY

Answer 9

प्रयत्न

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

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