html tag কিভাবে আমি এইচটিএমএল/সিএসএস একটি ইমেজ মাত্র একটি অংশ প্রদর্শন করতে পারেন?




সিএসএস কি (3)

চলুন বলি যে আমি একটি চিত্রের 50x50px কেন্দ্রটি প্রদর্শনের একটি উপায় চাই যা HTML এ 250x250px এর। আমি এটা কিভাবে করবো. এছাড়াও, CSS এর জন্য এটি করার একটি উপায় আছে: url () রেফারেন্স?

আমি সিএসএস ক্লিপ সচেতন, কিন্তু পরম অবস্থান সঙ্গে ব্যবহৃত যখন শুধুমাত্র কাজ বলে মনে হয়।


আরেকটি বিকল্প নিম্নরূপ, তবে এটি পরিষ্কার নয় যদিও এটি একটি ধারকের একমাত্র উপাদান হিসাবে অনুমান করে, যেমন এই ক্ষেত্রে:

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

তারপর আপনি কনটেইনারটিকে পছন্দসই আকারের সাথে একটি মাস্ক হিসাবে ব্যবহার করতে পারেন, এবং ছবিটি নেতিবাচক মার্জিনের সাথে সঠিক অবস্থানে স্থানান্তরিত করতে পারেন:

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

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

ডেমো এই JSFiddle দেখা যায়।

শুধু IE> 9, এবং সম্ভবত অন্যান্য ব্রাউজারের সব উল্লেখযোগ্য সংস্করণে কাজ বলে মনে হয়।


এটি করার একটি উপায় হল আপনি যে চিত্রটি একটি ধারক (টিডি, ডিভি, স্প্যান ইত্যাদি) তে ব্যাকগ্রাউন্ড হিসাবে প্রদর্শন করতে চান তা সেট করতে এবং তারপর স্প্রেট পেতে আপনার পটভূমি-অবস্থান সামঞ্জস্য করুন।


যখন আপনি ইতিমধ্যে একটি উত্তর গ্রহণ করেছেন, আমি কেবল যোগ করব যে (কিছুটা স্বল্প-পরিচিত) clip CSS সম্পত্তি রয়েছে, যদিও এটির উপাদানটি ক্লিপ হওয়া প্রয়োজন তা হল 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 - আয়তক্ষেত্রাকার / ক cuboid আকার, চারটি মানের 'দূরত্ব থেকে' (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 (একটি CSS আইডি-নির্বাচক ব্যবহার করে) হতে পারে অথবা একটি SVG সনাক্ত করার জন্য একটি বহিরাগত ফাইলের URL (একটি ফাইল-পাথ ব্যবহার করে) হতে পারে, যদিও আমি (এমনকি এখনো) আমি তাদের বেনিফিট বা caveat হিসাবে কোন অন্তর্দৃষ্টি অফার করতে পারেন।

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>

পরীক্ষার জন্য জেএস ফিডেল ডেমো

তথ্যসূত্র:





image