क्या मैं छद्म तत्वों के बाद सीएसएस में / से पहले एक छवि की ऊंचाई बदल सकता हूं?

Question

मान लीजिए कि मैं एक छवि का उपयोग करके कुछ फ़ाइल प्रकारों के लिंक सजाने चाहता हूं। मैं अपने लिंक की घोषणा कर सकता हूं

<a href='foo.pdf' class='pdflink'>A File!</a>

फिर सीएसएस की तरह है

.pdflink:after { content: url('/images/pdf.png') }

अब, यह बढ़िया काम करता है, सिवाय इसके कि pdf.pngमेरे लिंक टेक्स्ट के लिए सही आकार नहीं है।

मैं :afterछवि को स्केल करने के लिए ब्राउज़र को बताने में सक्षम होना चाहता हूं , लेकिन मुझे मेरे जीवन के लिए सही वाक्यविन्यास नहीं मिल सकता है। या यह पृष्ठभूमि छवियों की तरह है, जहां आकार बदलना संभव नहीं है?

ETA: मैं या तो a) की ओर झुक रहा हूँ) स्रोत छवि का आकार बदलकर "सही" आकार, सर्वर-साइड और / या b) मार्कअप को बदलने के लिए बस IMG टैग इनलाइन की आपूर्ति करना। मैं उन दोनों चीजों से बचने की कोशिश कर रहा था, लेकिन उन्हें लगता है कि वे सीएसएस के साथ पूरी तरह से सामान बनाने की कोशिश करने से ज्यादा संगत होंगे। अपने मूल सवाल का जवाब "आप कर सकते हैं प्रतीत हो रहा है की सॉर्ट यह कर, कभी कभी"।

Comments

क्या कोई सम्मोहक कारण है कि आप 'img' टैग का उपयोग नहीं कर रहे हैं, जो उनके चारों ओर लिपटा हुआ टैग है? यह एक छवि के लिए अधिक विशिष्ट वाक्यविन्यास है जो एक कड़ी भी है। मैं यह कहता हूं क्योंकि भले ही आपको काम करने की अपनी विधि मिल जाए, आप अन्य डेवलपर्स को भ्रमित कर सकते हैं। ब्राउज़रों / संस्करणों के बीच सीएसएस के पास अस्थिरता के लिए एक मजबूत प्रतिष्ठा भी है।

— Servy

मैं इस मुद्दे की सराहना करता हूं, यह सिर्फ इतना है कि मैं जरूरी नहीं कि मार्कअप पीढ़ी को नियंत्रित करूं - इस मामले में मैं केवल री-स्टाइल कर सकता हूं, री-स्ट्रक्चर नहीं।

— कोडर

W3C मेलिंग सूची पर लंबी चर्चा: lists.w3.org/Archives/Public/www-style/2011Nov/…

— user123444555621

Answer 1

समायोजन की background-sizeअनुमति है। आपको अभी भी ब्लॉक की चौड़ाई और ऊंचाई निर्दिष्ट करने की आवश्यकता है।

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

MDN पर पूर्ण संगतता तालिका देखें ।

Comments

यह महान है सिवाय इसके कि हमारे अधिकांश ग्राहक IE 7 या 8 (कॉर्पोरेट बकवास, क्षमा करें) पर हैं।

— कोडर

यदि ऐसा है, तो आपको बिल्कुल भी उपयोग नहीं करना चाहिए :after। यह IE8 के नीचे समर्थित नहीं है।

— एंसल सैंटोसा

इस तकनीक width: 10px; height: 20px;को छवि को देखने के लिए सेटिंग भी आवश्यक है ।

— यहाँ

यह भी ध्यान दें कि यह वास्तव में काम करता है, लेकिन केवल विशिष्ट background-imageसंपत्ति के साथ, सरल backgroundकाम नहीं करेगा।

— ग्यूबर

(के लिए :before) मैं भी जरूरत position: absoluteहै, और left: -10px।

— ह्यूगो

Answer 2

ध्यान दें कि :afterछद्म तत्व एक बॉक्स है, जिसमें बदले में उत्पन्न छवि होती है। छवि को स्टाइल करने का कोई तरीका नहीं है, लेकिन आप बॉक्स को स्टाइल कर सकते हैं।

निम्नलिखित सिर्फ एक विचार है, और उपरोक्त समाधान अधिक व्यावहारिक है।

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

कमियां: आपको छवि के आंतरिक आयामों को जानना होगा, और यह आपको कुछ व्हाट्सएप के साथ छोड़ देगा, जिसे मैं एटीएम से छुटकारा नहीं पा सकता हूं।

Comments

ज़ूम: 0.5 भी विचार करने योग्य है।

— एलेक्स

मुझे इस समाधान का विचार पसंद है, लेकिन यह एक इनलाइन-ब्लॉक परिदृश्य में स्थिति को बंद कर देता है। (IE 11)

— क्रिस्टोफर डेविस

ज़ूम अच्छी तरह से समर्थित नहीं है।

jsfield आकार नहीं बदल रहा है। मैं नवीनतम फ़ायरफ़ॉक्स का उपयोग कर रहा हूँ। मैंने ज़ूम के उपयोग से इस पोस्ट में अंतिम jsfiddle उदाहरण की भी कोशिश की, और यह भी काम नहीं करता है।

— रायन

बस एक नोट: मेरे मामले में, मुझे वास्तव में काम position: absoluteकरने के लिए रखना था transform: scale(0.5)। मुझे पवित्रता के लिए position: relative"मूल" तत्व ( :afterछद्म के मालिक ) में भी रखना था । इसके अलावा, मुझे translate(-16px, -16px)16x16 आइकन को सही ढंग से स्थिति में बदलने के लिए अपने परिवर्तन में जोड़ना पड़ा । position: absoluteव्हॉट्सएप की समस्या को खत्म करने का भी फायदा है।

— ब्रैडेन बेस्ट

Answer 3

चूंकि मेरा अन्य उत्तर स्पष्ट रूप से अच्छी तरह से समझा नहीं गया था, यहाँ एक दूसरा प्रयास है:

प्रश्न का उत्तर देने के लिए दो दृष्टिकोण हैं।

प्रैक्टिकल (सिर्फ मुझे भगवान की तस्वीर दिखाओ!)

:afterछद्म चयनकर्ता के बारे में भूल जाओ , और जैसे कुछ के लिए जाओ

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

सैद्धांतिक

सवाल यह है कि क्या आप सामग्री उत्पन्न कर सकते हैं ? जवाब है: नहीं, आप नहीं कर सकते। इस मुद्दे पर W3C मेलिंग सूची पर एक लंबी चर्चा हुई है , लेकिन अभी तक कोई समाधान नहीं हुआ है।

जेनरेट की गई सामग्री को एक जेनरेट किए गए बॉक्स में प्रस्तुत किया जाता है, और आप उस बॉक्स को स्टाइल कर सकते हैं, लेकिन सामग्री को ऐसे नहीं । विभिन्न ब्राउज़र बहुत अलग व्यवहार दिखाते हैं

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome पहले एक का आकार बदलता है, लेकिन दूसरे के लिए छवि के आंतरिक आयामों का उपयोग करता है

फ़ायरफ़ॉक्स और यानी पहले का समर्थन नहीं करते हैं, और दूसरे के लिए आंतरिक आयाम का उपयोग करते हैं

ओपेरा दोनों मामलों के लिए आंतरिक आयामों का उपयोग करता है

( http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html से )

इसी तरह, ब्राउज़र http://jsfiddle.net/Nwupm/1/ जैसी चीजों पर बहुत अलग परिणाम दिखाते हैं , जहां एक से अधिक तत्व उत्पन्न होते हैं। ध्यान रखें कि CSS3 अभी भी शुरुआती विकास के चरण में है, और यह समस्या अभी तक हल नहीं हुई है।

Comments

@TJ प्रत्येक अलग उत्तर एक उत्तर के हकदार हैं (यदि यह स्पष्ट रूप से पर्याप्त नहीं है), जो अलग-अलग मात्रा में उत्थान प्राप्त करेगा और उत्तर की सामग्री के आधार पर अलग-अलग देखा / उद्धृत / साझा किया जाएगा।

— टिमो हुओवेनन

Answer 4

आपको छवि के बजाय पृष्ठभूमि का उपयोग करना चाहिए।

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

Answer 5

diplay: block; कोई प्रभाव नहीं है

पोजिशनिन भी फाउंडेंशन को आगे बढ़ाने के लिए बहुत अजीब तरीके से काम करता है, इसलिए सावधान रहें

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

Answer 6

यहाँ एक और (काम कर) समाधान है: बस अपनी छवियों को उस आकार का आकार दें जो आप चाहते हैं :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

इस काम के लिए आपको pdf.png 20px * 10px होना चाहिए। सीएसएस में 20 पीएक्स / 10 पीएक्स यहां ब्लॉक का आकार देने के लिए हैं ताकि ब्लॉक के बाद आने वाले तत्व छवि के साथ खिलवाड़ न करें

कच्ची छवि की एक प्रति अपने मूल आकार में रखना न भूलें

Comments

इसे कहते हैं चुटकुले !!

— एमडी आशिक

Answer 7

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

Answer 8

आप zoomसंपत्ति का उपयोग कर सकते हैं। इस jsfiddle की जाँच करें

Comments

Jsfiddle की जाँच करें, दोनों एक ही आकार के हैं और ज़ूम को लाल रंग में हाइलाइट किया गया है।

— रयान

यह फिलहाल फ़ायरफ़ॉक्स 53 में आकार नहीं देता है। उम्मीद है, इसे फ़ायरफ़ॉक्स के बाद के संस्करण में लागू किया जा सकता है। यह जानना अच्छा है कि यह कम से कम क्रोम में काम करता है। :-)

— रेयान

Answer 9

आप इस तरह से पहले या बाद के तत्व की ऊंचाई या चौड़ाई बदल सकते हैं :

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

Answer 10

मैंने इस फ़ॉन्ट आकार नियंत्रण चौड़ाई का उपयोग किया

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

Answer 11

आजकल फ्लेक्सबॉक्स के साथ आप अपने कोड को बहुत सरल कर सकते हैं और केवल 1 पैरामीटर को आवश्यकतानुसार समायोजित कर सकते हैं:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

अब आप केवल तत्व की चौड़ाई को समायोजित कर सकते हैं और ऊंचाई स्वचालित रूप से समायोजित हो जाएगी, चौड़ाई को बढ़ा / घटा सकती है जब तक कि तत्व की ऊंचाई आपकी आवश्यकता की संख्या पर न हो।

Comments

मेरे लिए काम नहीं किया, शायद क्योंकि छवि svg है, हो सकता है क्योंकि माता पिता एक फ्लेक्स कंटेनर है।

— मिगुएल पाइन्टो

एक या तो jpg पर नहींurl(//placeimg.com/800/200/arch)

— BananaAcid

Answer 12

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;