सीएसएस छवि खुद का प्रतिशत आकार?

109

मैं एक प्रतिशत के साथ एक img का आकार बदलने की कोशिश कर रहा हूँ। उदाहरण के लिए, मैं केवल छवि को ५०% के आकार से घटाकर आधा करना चाहता हूं। लेकिन आवेदन करने width: 50%;से छवि 50% कंटेनर तत्व (मूल तत्व जो संभवतः <body>उदाहरण के लिए) होगी।

प्रश्न है, क्या मैं जावास्क्रिप्ट या सर्वर साइड का उपयोग किए बिना छवि को स्वयं प्रतिशत के साथ आकार दे सकता हूं? (मुझे छवि आकार की कोई प्रत्यक्ष जानकारी नहीं है)

मुझे पूरा यकीन है कि आप ऐसा नहीं कर सकते हैं, लेकिन मैं सिर्फ यह देखना चाहता हूं कि क्या बुद्धिमान सीएसएस केवल समाधान है। धन्यवाद!

html css image

— मिन मिंग लो
स्रोत

यदि आप उपयोग करेंगे तो इसमें तत्व का प्रतिशत ऊपर ले जाएगा width: <number>%। मुझे नहीं लगता कि ऐसा करने का कोई तरीका है!

— अनिकेत

111

मेरे पास आपके लिए 2 तरीके हैं।

विधि 1. jsFiddle पर डेमो

यह विधि छवि का आकार केवल DOM में वास्तविक आयाम नहीं है, और मूल आकार के मध्य में आकार बदलने के बाद दृश्य स्थिति है।

एचटीएमएल:

<img class="fake" src="example.png" />

सीएसएस:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

ब्राउज़र समर्थन नोट: ब्राउज़र आँकड़े इनलाइन दिखाया गया हैcss।

विधि 2. jsFiddle पर डेमो

एचटीएमएल:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

सीएसएस:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}

नोट: img.normal औरimg.fakeएक ही छवि है।
ब्राउज़र समर्थन नोट: यह विधि सभी ब्राउज़रों में काम करेगी, क्योंकि सभी ब्राउज़रcssविधि में प्रयुक्त गुणों कासमर्थन करतेहैं।

विधि इस तरह से काम करती है:

#wrapऔर #wrap img.fakeप्रवाह है
#wrapहै overflow: hiddenताकि उसके आयाम भीतरी छवि के समान हैं ( img.fake)
img.fakeस्थिति के #wrapबिना अंदर एकमात्र तत्व है absoluteताकि यह दूसरे चरण को न तोड़े
#img_wrapहै absoluteस्थिति के अंदर #wrapऔर संपूर्ण तत्व आकार में फैली हुई है ( #wrap)
चौथे चरण का परिणाम यह है कि #img_wrapछवि के समान आयाम हैं।
की स्थापना करके width: 50%पर img.normal, इसका आकार है 50%की #img_wrapहै, और इसलिए 50%मूल छवि आकार की।

— व्लादिमीर स्टार्कोव
स्रोत

यह मूल आकार के 50% तक छवि का आकार नहीं बदलता है, यह अब img_wrap के माता-पिता का 50% है ..

— वेस्ले

समस्या को हल करने के प्रयास के लिए मेरा अद्यतन उत्तर देखें। तुम क्या सोचते हो?

— वेस्ले

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

— वेस्ले

यह असंभव है, क्योंकि मुख्य चाल दो नेस्टेड और फ्लोटेड टैग में है।

— व्लादिमीर स्टार्कोव

1

transform:scale()समाधान एक बड़ी समस्या है, हालांकि है। यह सीएसएस बॉक्स मॉडल के साथ अच्छी तरह से बातचीत नहीं करता है। जो से मेरा मतलब है कि यह यह साथ बातचीत नहीं करता सब पर है, तो आप लेआउट जो सभी गलत लग रहा है मिलता है। देखें: jsfiddle.net/kahen/sGEkt/8

— kahen

46

HTML:

<span>
    <img src="example.png"/>
</span>

सीएसएस:

span {
    display: inline-block;
}
img {
    width: 50%;
}

कंटेनर तत्व दृष्टिकोण का उपयोग करके यह सबसे सरल समाधानों में से एक हो गया है।

कंटेनर तत्व दृष्टिकोण का उपयोग कर रहे हैं, इस सवाल की एक विविधता है इस सवाल का । चाल को कंटेनर तत्व को बच्चे की छवि को छोटा करने देना है, इसलिए इसका आकार असंबद्ध छवि के बराबर होगा। इस प्रकार, जब सेटिंगwidth छवि की संपत्ति को प्रतिशत मान के रूप में , छवि को उसके मूल पैमाने के सापेक्ष बढ़ाया जाता है।

अन्य shrinkwrapping: सक्षम गुण और संपत्ति मूल्यों से कुछ हैं: float: left/right,position: fixed और min/max-width, के रूप में जुड़ा हुआ प्रश्न में उल्लेख किया है। प्रत्येक के अपने दुष्प्रभाव हैं, लेकिन display: inline-blockएक सुरक्षित विकल्प होगा। मैट ने float: left/rightअपने जवाब में उल्लेख किया है, लेकिन उन्होंने गलत तरीके से इसके लिए जिम्मेदार ठहराया overflow: hidden।

Jsfiddle पर डेमो

संपादित करें: ट्रोजन द्वारा उल्लिखित , आप नए शुरू किए गए CSS3 के आंतरिक और बाहरी साइज़िंग मॉड्यूल का भी लाभ उठा सकते हैं :

HTML:

<figure>
    <img src="example.png"/>
</figure>

सीएसएस:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

हालांकि, सभी लोकप्रिय ब्राउज़र संस्करण लेखन के समय इसका समर्थन नहीं करते हैं ।

— समुदाय
स्रोत

@ किसी को भी सीमाओं को ढहने से कैसे ठीक करना है? फिडल

— CoR

यह वही था जो मुझे चाहिए था ... कुछ त्वरित और सरल, धन्यवाद। मैंने इसे इस तरह इस्तेमाल किया: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

— Chnikki

भविष्य पाठकों के लिए: पर स्थापित करने के लिए सही मान figureहै width: fit-content;अब तक। ब्राउजर सपोर्ट भी आज काफी बेहतर है।

— डेनियल किस-नेगी

12

zoomसंपत्ति का प्रयास करें

<img src="..." style="zoom: 0.5" />

संपादित करें: जाहिरा तौर पर, फ़ायरफ़ॉक्स zoomसंपत्ति का समर्थन नहीं करता है। आपको उपयोग करना चाहिए;

-moz-transform: scale(0.5);

फ़ायर्फ़ॉक्स के लिए।

— अमीर अकाड्यन
स्रोत

4

"ज़ूम" जैसी कोई सीएसएस संपत्ति नहीं है और यह किसी और के द्वारा समर्थित नहीं है लेकिन IE। यह एक Microsoft स्वामित्व वाली चीज़ है और गैर-मानक है।

— रोब

9

दुर्भाग्य से, यह जानकारी आउट-डेटेड है। ज़ूम इस समय इंटरनेट एक्सप्लोरर, क्रोम और सफारी ब्राउज़रों द्वारा समर्थित है। फ़ायर्फ़ॉक्स और ओपेरा इसका समर्थन नहीं करते हैं, फिर भी। इसलिए मैंने एडिट पार्ट को जोड़ लिया है। IE इसका समर्थन करने वाला पहला व्यक्ति है लेकिन केवल एक ही नहीं है।

— अमीर अकायेदीन

इस लिंक के अनुसार, ओपेरा ज़ूम का भी समर्थन करता है। फ़ायरफ़ॉक्स केवल एक ही है जो समर्थन नहीं करता है। Fix-css.com/2011/05/css-zoom

— अमीर 16

2

यही कारण है कि IE ने पिछले 8 वर्षों में अपना आधा बाजार हिस्सा खो दिया है। यदि आप किसी चीज़ का समर्थन करने के लिए मज़बूती से ब्राउज़रों पर भरोसा नहीं कर सकते हैं, तो आपके पास कोई सामान्य आधार नहीं है। युक्ति ब्राउज़र विक्रेताओं द्वारा स्वयं लिखी जाती है। यदि वे इसे वहां नहीं डालेंगे, तो उस पर भरोसा न करें या आप मार्कअप की कई लाइनें लिखेंगे जैसे आपने किया है। यह सब फिर से 1998 नहीं है।

— रोब

1

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

— अमीर अकाएदीन

5

एक और उपाय उपयोग करना है:

<img srcset="example.png 2x">

यह मान्य नहीं होगा क्योंकि srcविशेषता की आवश्यकता है, लेकिन यह काम करता है (IE के किसी भी संस्करण को छोड़कर क्योंकि srcsetसमर्थित नहीं है)।

— benface
स्रोत

2

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

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

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

— मैट
स्रोत

2

यह एक बहुत पुराना धागा है, लेकिन मैंने इसे मानक रिज़ॉल्यूशन डिस्प्ले पर रेटिना (हाई रेस) स्क्रीन कैप्चर प्रदर्शित करने के लिए एक सरल समाधान की खोज करते हुए पाया।

तो आधुनिक ब्राउज़रों के लिए एक HTML ही समाधान है:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

यह ब्राउज़र को बता रहा है कि छवि उसके इच्छित प्रदर्शन आकार का दोगुना है। मान आनुपातिक है और छवि के वास्तविक आकार को प्रतिबिंबित करने की आवश्यकता नहीं है। एक ही प्रभाव को प्राप्त करने के लिए 2w 1px का उपयोग कर सकते हैं। Src विशेषता केवल विरासत ब्राउज़र द्वारा उपयोग की जाती है।

इसका अच्छा प्रभाव यह है कि यह रेटिना या मानक डिस्प्ले पर समान आकार प्रदर्शित करता है, बाद में सिकुड़ता है।

— Max_B
स्रोत

0

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

यह समाधान js और jquery का उपयोग करता है और केवल छवि गुणों पर आधारित होता है और अभिभावक पर नहीं। यह एकल छवि या समूह और आईडी मापदंडों का उपयोग कर आधारित एक समूह का आकार बदल सकता है।

अधिक जानकारी के लिए यहां जाएं : https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— जेनी वल्लन
स्रोत

0

यह एक कठिन दृष्टिकोण नहीं है:

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

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

— nickthehero
स्रोत

0

वास्तव में यहां अधिकांश उत्तर वास्तव में स्वयं की चौड़ाई के लिए छवि को स्केल नहीं करते हैं ।

हमें imgतत्व पर ऑटो की चौड़ाई और ऊंचाई की आवश्यकता है ताकि हम इसे मूल आकार के साथ शुरू कर सकें।

उसके बाद एक कंटेनर तत्व हमारे लिए छवि को स्केल कर सकता है।

सरल HTML उदाहरण:

<figure>
    <img src="your-image@2x.png" />
</figure>

और यहाँ सीएसएस नियम हैं। मैं इस मामले में एक पूर्ण कंटेनर का उपयोग करता हूं:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

आप जैसे नियमों के साथ छवि स्थिति ट्विक कर सकते हैं transform: translate(0%, -50%);।

— फ्लोरिस
स्रोत

-1

मुझे लगता है कि आप सही हैं, यह अभी तक शुद्ध सीएसएस के साथ संभव नहीं है, जहां तक मुझे पता है (क्रॉस-ब्राउज़र का मतलब नहीं है)।

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

ठीक है मुझे मेरा जवाब बहुत पसंद नहीं आया इसलिए मैंने थोड़ा हैरान किया। मुझे एक दिलचस्प विचार मिल सकता है जो मदद कर सकता है .. शायद यह सब के बाद संभव है (हालांकि अब तक का सबसे सुंदर नहीं):

संपादित करें: Chrome, FF और IE 8 & 9 में परीक्षण और कार्य करना । यह IE7 में काम नहीं करता है।

jsFiddle उदाहरण यहां

एचटीएमएल:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

सीएसएस:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

— वेस्ले
स्रोत

आपका उदाहरण छवि का आनुपातिक नहीं है

— व्लादिमीर स्टार्कोव

आपकी विधि खिड़की के आकार के माध्यम से छवि को कम करना संभव बनाती है

— व्लादिमीर स्टार्कोव

यह इसलिए है क्योंकि आप उपयोग कर रहे हैं inline-block, इसीलिए चौड़ाई #img_wrapन केवल आंतरिक html चौड़ाई पर निर्भर करती है, बल्कि संदर्भ-कंटेनर की चौड़ाई पर भी निर्भर करती है।

— व्लादिमीर स्टार्कोव

जहां तक मैं बता सकता हूं, वह प्रदर्शन: कोई भी छवि कुछ भी नहीं करती है और इसे हटाया नहीं जा सकता है। या क्या मैं कुछ न कुछ भूल रहा हूं?

— कांप