मैं HTML / CSS में छवि का एक भाग कैसे प्रदर्शित कर सकता हूं?

Question

मान लीजिए कि मुझे HTML में 250x250px की छवि के केंद्र 50x50px का प्रदर्शन करने का एक तरीका चाहिए। मैं उसे कैसे कर सकता हूँ। इसके अलावा, क्या सीएसएस के लिए ऐसा करने का एक तरीका है: url () संदर्भ?

मैं सीएसएस में क्लिप के बारे में पता कर रहा हूँ , लेकिन यह केवल काम करने के लिए लगता है जब पूर्ण स्थिति के साथ प्रयोग किया जाता है।

Comments

सूची सूची HTML / CSS / JS समस्याओं के साथ देखने के लिए साइटों की किसी की सूची में होनी चाहिए: यहाँ स्प्राइट करने का एक तरीका है , और यहाँ JS का उपयोग करने का एक और तरीका है ।

— graham.reeds

स्प्राइट का उपयोग करें - यहाँ देखें w3schools.com/css/css_image_sprites.asp

Answer 1

इसका एक तरीका यह है कि आप जिस छवि को एक कंटेनर (td, div, span आदि) में पृष्ठभूमि के रूप में प्रदर्शित करना चाहते हैं उसे सेट करें और फिर इच्छित स्थान प्राप्त करने के लिए पृष्ठभूमि-स्थिति को समायोजित करें।

Comments

बस स्पष्ट करने के लिए, आप इस कार्य को करने के लिए कंटेनर td, div, span या जो भी 50px की चौड़ाई और ऊंचाई निर्धारित करेंगे।

— पॉल डी। वेट

@ ईस्पो, यह एक काफी मानक दृष्टिकोण प्रतीत होता है, हालाँकि क्या होगा यदि आपके पास एक स्प्राइट छवि है जिसमें आकार 32x32 की कई अलग-अलग छवियां हैं, और आप इनमें से 1 को डिव, स्पैन आदि पर प्रदर्शित करना चाहते हैं जो 32x32 से बड़ा है। पृष्ठभूमि-स्थिति को अब काम नहीं करता है।

— मैथ्यू लेटन

@ Series0ne आप शायद इसके साथ गठबंधन कर सकते हैंbackground-size

— Stijn de Witt

Answer 2

जैसा कि प्रश्न में उल्लेख किया गया है, clipसीएसएस संपत्ति है, हालांकि यह है की आवश्यकता है कि तत्व काटा जा रहा है position: absolute;(जो एक शर्म की बात है है):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

जेएस फिडेल डेमो , प्रयोग के लिए।

मूल उत्तर को पूरक करने के लिए - कुछ हद तक - मैं इसके उपयोग को दिखाने के लिए संपादन कर रहा हूं clip-path, जिसने अब पदावनत clipसंपत्ति को बदल दिया है ।

clip-pathसंपत्ति विकल्प (अधिक-तो मूल की तुलना में की एक श्रृंखला की अनुमति देता है clip), की:

• inset- आयताकार / घनाकार आकृतियों को 'दूरी से' के रूप में चार मानों से परिभाषित किया गया है (top right bottom left)।
• circle- circle(diameter at x-coordinate y-coordinate)।
• ellipse- ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate)।
• polygon- की एक श्रृंखला द्वारा परिभाषित x/y ऊपरी-बाएँ कोने के तत्व की उत्पत्ति के संबंध में । जैसे ही मार्ग स्वचालित रूप से बंद हो जाता है बहुभुज के लिए यथार्थवादी न्यूनतम अंक तीन होना चाहिए, कोई भी कम (दो) एक रेखा है या (एक) एक बिंदु है polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]):।
• url - यह या तो एक स्थानीय URL (एक सीएसएस आईडी-चयनकर्ता का उपयोग करके) या एक एसवीजी की पहचान करने के लिए एक बाहरी फ़ाइल (फ़ाइल-पथ का उपयोग करके) का URL हो सकता है, हालांकि मैंने या तो (अभी तक) प्रयोग नहीं किया है, इसलिए मैं उनके लाभ या चेतावनी के रूप में कोई अंतर्दृष्टि प्रदान कर सकते हैं।

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

जेएस फिडेल डेमो , प्रयोग के लिए।

संदर्भ:

• clip- नोट: पदावनत ।
• clip-path (MDN) ।
• clip-path(W3C) ।

Comments

अद्भुत लगता है, बहुत बहुत धन्यवाद :) बस FYI करें, यह उतना सीमित नहीं है जितना कोई सोचता है। यदि आपके पास img टैग के चारों ओर एक इमेज कंटेनर div (id = "img_container") है, तो बस img_container की स्थिति को सापेक्ष बनाएं, और img को निरपेक्ष बनाएं, आप इस तरह से इमेज को क्लिप कर सकते हैं

— FurtiveFelon

"स्थिति: निरपेक्ष; (जो शर्म की बात है)"

— संकेत साहू

ऐसा नहीं है कि मुझे पता है, नहीं।

— डेविड का कहना है कि मोनिका

clipहै पदावनत । नए clip-pathकी स्थिति की आवश्यकता नहीं है

— 12

जबकि क्लिप को हटा दिया गया है कई आधुनिक ब्राउज़र अभी तक क्लिप-पथ का समर्थन नहीं करते हैं। developer.mozilla.org/en-US/docs/Web/CSS/clip-path

— barrypicker

Answer 3

एक अन्य विकल्प निम्नलिखित है, हालांकि सबसे साफ नहीं है क्योंकि यह छवि को कंटेनर में एकमात्र तत्व मानता है, जैसे कि इस मामले में:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

फिर आप इच्छित आकार के साथ कंटेनर को मास्क के रूप में उपयोग कर सकते हैं, और इसे सही स्थिति में स्थानांतरित करने के लिए एक नकारात्मक मार्जिन के साथ छवि को घेर सकते हैं:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

इस JSFiddle में डेमो देखा जा सकता है ।

केवल IE> 9 में काम करने के लिए लगता है, और शायद सभी अन्य ब्राउज़रों के सभी महत्वपूर्ण संस्करण।

Comments

हालाँकि यह एक बिट हैक है, लेकिन इसका दूसरा पहलू यह है कि यह सभी ब्राउज़रों में काम करता है (क्लिप पदावनत है और क्लिप-पथ IE में काम नहीं करता है) और यह तब काम करता है जब आप वेबपेज को प्रिंट करने की कोशिश करते हैं (पृष्ठभूमि चित्र डिफ़ॉल्ट रूप से छोड़ दिए जाते हैं )

— रौनी लिलेमेट्स

यह एकमात्र समान रूप से विस्तृत ब्राउज़र विधि है। अन्य सभी तरीकों में समस्याएं हैं। "क्लिप" को हटा दिया गया है और पृष्ठभूमि-स्थिति सभी ब्राउज़रों में सटीक रूप से नहीं पढ़ी गई है।

— करीम