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

Question

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

আমি সিএসএসে ক্লিপ সম্পর্কে সচেতন , তবে এটি কেবল পরম অবস্থানের সাথে ব্যবহৃত হলে কাজ করবে বলে মনে হয়।

Comments

একটি তালিকা ছাড়াও সাইট এইচটিএমএল / সিএসএস / জেএস সমস্যার সঙ্গে দেখার জন্য এর anyones তালিকায় হওয়া উচিত: এখানে sprites করছেন একটি উপায় , এবং এখানে জাতীয় ব্যবহার করে অন্য এর ।

— গ্রাহাম.রিডস

একটি স্প্রিট ব্যবহার করুন - এখানে w3schools.com/css/css_image_sprites.asp দেখুন

Answer 1

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

Comments

কেবল স্পষ্ট করে বলার জন্য, আপনি এই কাজটি করার জন্য ধারক টিডি, ডিভ, স্প্যান বা 50px এর যাবতীয় প্রস্থ এবং উচ্চতা নির্ধারণ করবেন।

— পল ডি ওয়েট

@ এসপো, এটি মোটামুটি মানক পদ্ধতির বলে মনে হচ্ছে, তবে আপনার যদি এমন একটি স্প্রিট চিত্র থাকে যা 32x32 আকারের একাধিক পৃথক চিত্র ধারণ করে এবং আপনি এর মধ্যে 1 টি একটি ডিভ, স্প্যান ইত্যাদিতে প্রদর্শন করতে চান যা 32x32 এর চেয়ে বড় .. । ব্যাকগ্রাউন্ড-অবস্থান সেট করা আর কাজ করে না।

— ম্যাথু লেটন

@ সিরিজ0 আপনি সম্ভবত এর সাথে একত্রিত করতে পারেনbackground-size

— স্টিজন ডি উইট

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 - এটি কোনও স্থানীয় ইউআরএল (কোনও সিএসএস আইডি-নির্বাচক ব্যবহার করে) বা কোনও এসভিজি সনাক্ত করতে কোনও বাহ্যিক ফাইলের (কোনও ফাইল-পাথ ব্যবহার করে) ইউআরএল হতে পারে, যদিও আমি (এখনও পর্যন্ত) পরীক্ষা-নিরীক্ষা করি নি, তাই আমি তাদের সুবিধা বা ক্যাভ্যাট সম্পর্কে কোনও অন্তর্দৃষ্টি দিতে পারে না।

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(এমডিএন) ।
• clip-path(W3C) এর ।

Comments

আশ্চর্যজনক সন্ধান, অনেক অনেক ধন্যবাদ :) শুধু এফওয়াইআই, এটি যতটা ভাবেন তত সীমাবদ্ধ নয়। আপনার যদি ইমগ ট্যাগের চারপাশে একটি চিত্র ধারক ডিভ (id = "img_container") থাকে তবে কেবল img_container অবস্থানকে আপেক্ষিক করে তুলুন এবং img পরম করুন, আপনি ছবিটি সেভাবে ক্লিপ করতে পারেন

— FurtiveFelon

"অবস্থান: পরম; (যা লজ্জাজনক)"

— সংকেত সাহু

না যে আমি সচেতন, না।

— ডেভিড মনিকাকে

clipহয় অবচিত । নবীনতর clip-pathপজিশনিং প্রয়োজন হয় না

— eagor

ক্লিপ অবহেলিত অবস্থায় অনেক আধুনিক ব্রাউজার এখনও ক্লিপ -থ সমর্থন করে না। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 3

অন্য বিকল্পটি নিম্নলিখিতটি হ'ল যদিও এটি পরিষ্কার নয় কারণ এটি চিত্রটিকে কোনও ধারক হিসাবে একমাত্র উপাদান হিসাবে ধরে নিয়েছে যেমন এই ক্ষেত্রে:

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

তারপরে আপনি ধারকটিকে পছন্দসই আকারের মুখোশ হিসাবে ব্যবহার করতে পারেন এবং চিত্রটিকে একটি সঠিক অবস্থানে নিয়ে যাওয়ার জন্য নেতিবাচক মার্জিন দিয়ে ঘিরে ফেলতে পারেন:

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

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

এই জেএসফিডেলে ডেমো দেখা যাবে ।

কেবল IE> 9 এ কাজ করছে বলে মনে হয় এবং সম্ভবত অন্যান্য সমস্ত ব্রাউজারের সমস্ত গুরুত্বপূর্ণ সংস্করণ।

Comments

যদিও এটি একটি বিটক হ্যাকি, এটির আরও বেশি দিক রয়েছে যা এটি সমস্ত ব্রাউজারগুলিতে কাজ করে (ক্লিপ অবচিত এবং ক্লিপ-পাথ আইআই তে কাজ করে না) এবং আপনি ওয়েবপৃষ্ঠাটি মুদ্রণের চেষ্টা করার সময় এটি কাজ করে (পটভূমির চিত্রগুলি ডিফল্ট হিসাবে এড়িয়ে যায়) )

— রুনি লিলিমেটস

এটিই সত্যিকারের একমাত্র ব্রাউজারের পদ্ধতি। অন্য সমস্ত উপায়ে সমস্যা আছে। "ক্লিপ" অবমূল্যায়ন করা হয়েছে এবং পটভূমি অবস্থানটি সমস্ত ব্রাউজারে সঠিকভাবে পড়া হয় না।

— করিম