clip प्रॉपर्टी

clip प्रॉपर्टी एक पूर्ण रूप से पोजीशन किए गए एलिमेंट को क्रॉप करने की अनुमति देती है, केवल निर्दिष्ट आयताकार क्षेत्र को दृश्यमान छोड़कर। मान rect फ़ंक्शन का उपयोग करके निर्दिष्ट किया जाता है।

सिंटैक्स

cssसिलेक्टर {
  clip: rect(ऊपर, दाएं, नीचे, बाएं) | auto;
}

इमेज तैयार करना

मान लीजिए कि हमारे पास प्रकृति की एक ऐसी इमेज है जिसे हम क्रॉप करेंगे:

html<img src="image.jpg" width="500">

Результат:

उदाहरण

आइए इमेज को क्रॉप करें, केवल केंद्रीय भाग को दृश्यमान छोड़कर:

html<div class="container">
  <img class="image" src="image.jpg">
</div>

css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

यह भी देखें