একটি গ্রিড লেআউটে ছবি জুম করা

ছবির একটি গ্রিড তৈরি করা সহজ, CSS গ্রিডকে ধন্যবাদ। কিন্তু গ্রিড তৈরি অভিনব জিনিস না পরে ইমেজ স্থাপন করা হয়েছে বন্ধ টান চতুর হতে পারে.

বলুন যে আপনি চিত্রগুলিতে কিছু অভিনব হোভার প্রভাব যুক্ত করতে চান যেখানে সেগুলি বড় হয় এবং যেখানে তারা বসে থাকে সারি এবং কলামের বাইরে জুম করে? আমরা এটা করতে পারি!

কুল, তাই না? আপনি যদি কোড চেক করেন, তাহলে আপনি কোনো জাভাস্ক্রিপ্ট, জটিল নির্বাচক বা এমনকি খুঁজে পাবেন না জাদু সংখ্যা. এবং এই আমরা অন্বেষণ করা হবে অনেক মধ্যে শুধুমাত্র একটি উদাহরণ!

গ্রিড নির্মাণ

গ্রিড তৈরি করার জন্য এইচটিএমএল কোডটি একটি পাত্রের মধ্যে থাকা চিত্রগুলির তালিকার মতোই সহজ। এর বেশি আমাদের দরকার নেই।

<div class="gallery">
  <img>
  <img>
  <img>
  <!-- etc. -->
</div>

CSS-এর জন্য, আমরা প্রথমে নিম্নলিখিতগুলি ব্যবহার করে গ্রিড সেট করে শুরু করি:

.gallery {
  --s: 150px; /* controls the size */
  --g: 10px;  /* controls the gap */

  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}

সংক্ষেপে, আমাদের দুটি ভেরিয়েবল রয়েছে, একটি যা চিত্রের আকার নিয়ন্ত্রণ করে এবং একটি যা চিত্রগুলির মধ্যে ফাঁকের আকার নির্ধারণ করে। aspect-ratio অনুপাতে জিনিস রাখতে সাহায্য করে।

আপনি হয়তো ভাবছেন কেন আমরা শুধুমাত্র তিনটি কলাম সংজ্ঞায়িত করছি কিন্তু কোন সারি নেই। না, আমি সারিগুলি ভুলে যাইনি — আমাদের কেবল সেগুলি স্পষ্টভাবে সেট করার দরকার নেই৷ CSS গ্রিড স্বয়ংক্রিয়ভাবে আইটেম স্থাপন করতে সক্ষম অন্তর্নিহিত সারি এবং কলাম, মানে আমরা এটিতে নিক্ষিপ্ত যেকোন সংখ্যক চিত্রের জন্য প্রয়োজনীয় যতগুলি সারি পাই। আমরা পরিবর্তে সারিগুলি স্পষ্টভাবে সংজ্ঞায়িত করতে পারি তবে আমাদের যোগ করতে হবে grid-auto-flow: column ব্রাউজার আমাদের জন্য প্রয়োজনীয় কলাম তৈরি করবে তা নিশ্চিত করতে।

উভয় ক্ষেত্রেই ব্যাখ্যা করার জন্য এখানে একটি উদাহরণ। পার্থক্য হল যে একটিতে প্রবাহিত হয় row একটি অন্য দিকে দিক column অভিমুখ.

চেক আউট এই অন্য নিবন্ধ আমি লিখেছিলাম অন্তর্নিহিত গ্রিড এবং অটো-প্লেসমেন্ট অ্যালগরিদম সম্পর্কে আরও জানতে।

এখন যেহেতু আমাদের গ্রিড আছে, এটি চিত্রগুলিকে স্টাইল করার সময়:

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

আমরা যে হোভার ইফেক্ট তৈরি করছি তা এই CSS এর উপর নির্ভর করে। এটি সম্ভবত আপনার কাছে অদ্ভুত দেখাচ্ছে যে আমরা এমন চিত্র তৈরি করছি যার কোন প্রস্থ বা উচ্চতা উভয়ই নেই কিন্তু ন্যূনতম প্রস্থ এবং উচ্চতা 100%। কিন্তু আপনি দেখতে পাবেন যে আমরা যা অর্জন করার চেষ্টা করছি তার জন্য এটি একটি সুন্দর কৌশল।

আমি এখানে যা করছি তা ব্রাউজারকে বলছে যে ছবিগুলি থাকতে হবে 0 প্রস্থ এবং উচ্চতা কিন্তু একটি ন্যূনতম উচ্চতা সমান হওয়া প্রয়োজন 100%… কিন্তু 100% কি? শতাংশ ব্যবহার করার সময়, মান হল অন্য কিছুর সাথে সম্পর্কিত. এই ক্ষেত্রে, আমাদের ইমেজ একটি ভিতরে স্থাপন করা হয় গ্রিড সেল এবং কি তা জানার জন্য আমাদের সেই আকারটি জানতে হবে 100% আপেক্ষিক।

ব্রাউজার প্রথমে উপেক্ষা করবে min-height: 100% গ্রিড কোষের আকার গণনা করতে, কিন্তু এটি ব্যবহার করবে height: 0 এর গণনায়। তার মানে আমাদের ছবিগুলি গ্রিড কোষের আকারে অবদান রাখবে না... কারণ তাদের টেকনিক্যালি কোনো শারীরিক আকার নেই। এর ফলে তিনটি সমান কলাম এবং সারি হবে যা গ্রিডের আকারের উপর ভিত্তি করে (যা আমরা সংজ্ঞায়িত করেছি .galleryএর প্রস্থ এবং aspect-ratio) প্রতিটি গ্রিড ঘরের উচ্চতা পরিবর্তনশীল ছাড়া আর কিছুই নয় --s আমরা সংজ্ঞায়িত করেছি (প্রস্থের জন্য একই)।

এখন যেহেতু আমাদের গ্রিডের সেলগুলির মাত্রা আছে, ব্রাউজার এটি ব্যবহার করবে min-height: 100% (এবং min-width: 100%) যা চিত্রগুলিকে প্রতিটি গ্রিড ঘরের স্থান সম্পূর্ণরূপে পূরণ করতে বাধ্য করবে। পুরো জিনিসটি কিছুটা বিভ্রান্তিকর মনে হতে পারে তবে মূল ধারণাটি হল নিশ্চিত করা যে গ্রিডটি চিত্রগুলির আকারকে সংজ্ঞায়িত করে না বরং অন্য উপায়ে। আমি ইমেজটি গ্রিডের আকার নির্ধারণ করতে চাই না এবং কেন হোভার প্রভাব যোগ করার পরে আপনি বুঝতে পারবেন।

হোভার প্রভাব তৈরি করা

আমাদের যা করতে হবে তা হল ছবিগুলির স্কেল বাড়ানো যখন সেগুলি হোভার করা হয়৷ আমরা একটি ইমেজ এর সামঞ্জস্য দ্বারা তা করতে পারেন width এবং height on :hover:

.gallery {
  --f: 1.5; /* controls the scale factor */
}

.gallery img:hover{
  width:  calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

আমি একটি নতুন কাস্টম ভেরিয়েবল যোগ করেছি, --f, হোভারে আকার নিয়ন্ত্রণ করার জন্য একটি স্কেল ফ্যাক্টর হিসাবে মিশ্রণে। লক্ষ্য করুন কিভাবে আমি আকার পরিবর্তনশীল গুণ করছি, --s, এটি দ্বারা নতুন চিত্রের আকার গণনা করতে।

কিন্তু আপনি বলেছেন যে ছবির সাইজ 0 হতে হবে। কি হচ্ছে? আমি হারিয়ে গেছি…

আমি যা বলেছি তা এখনও সত্য কিন্তু আমি হোভারড ইমেজের জন্য ব্যতিক্রম করছি। আমি ব্রাউজারকে বলছি যে শুধুমাত্র একটি চিত্রের একটি আকার থাকবে যা শূন্যের সমান নয় - তাই এটি গ্রিডের মাত্রায় অবদান রাখবে - যখন অন্য সবগুলি সমান থাকবে 0.

বাম দিকে গ্রিডটিকে তার স্বাভাবিক অবস্থায় দেখায় কোনো হোভার করা ছবি ছাড়াই, যা ডান দিকটি দেখাচ্ছে। বাম দিকের সমস্ত গ্রিড কক্ষগুলি আকারে সমান কারণ সমস্ত চিত্রের কোনও শারীরিক মাত্রা নেই৷

ডানদিকে, প্রথম সারির দ্বিতীয় চিত্রটি হোভার করা হয়েছে, যা এটিকে এমন মাত্রা দেয় যা গ্রিড ঘরের আকারকে প্রভাবিত করে। ব্রাউজার হোভারে সেই নির্দিষ্ট গ্রিড সেলটিকে বড় করে তুলবে, যা সামগ্রিক আকারে অবদান রাখে। এবং যেহেতু পুরো গ্রিডের আকার সেট করা আছে (কারণ আমরা একটি নির্দিষ্ট সেট করেছি width উপরে .gallery), অন্যান্য গ্রিড কোষ যৌক্তিকভাবে ছোট হয়ে সাড়া দেবে যাতে রাখা যায় .galleryকৌশলে সামগ্রিক আকার।

এটাই আমাদের জুম প্রভাব! শুধুমাত্র একটি চিত্রের আকার বৃদ্ধি করে আমরা পুরো গ্রিড কনফিগারেশনকে প্রভাবিত করি এবং আমরা আগেই বলেছিলাম যে গ্রিড চিত্রগুলির আকার নির্ধারণ করে যাতে প্রতিটি চিত্র সমস্ত স্থান পূরণ করতে তার গ্রিড ঘরের ভিতরে প্রসারিত হয়।

এই, আমরা একটি স্পর্শ যোগ করুন transition আর ব্যবহার করুন object-fit ইমেজ বিকৃতি এড়াতে এবং বিভ্রম নিখুঁত!

আমি জানি যে কৌশলের পিছনে যুক্তি বোঝা সহজ নয়। আপনি যদি এটি সম্পূর্ণরূপে বুঝতে না পারেন তবে চিন্তা করবেন না। সবচেয়ে গুরুত্বপূর্ণ হল ব্যবহৃত কোডের গঠন বোঝা এবং আরও বৈচিত্র পেতে এটিকে কীভাবে পরিবর্তন করা যায়। যে আমরা পরবর্তী করতে হবে!

আরো ছবি যোগ করা হচ্ছে

মূল কৌশলটি ব্যাখ্যা করার জন্য আমরা একটি 3×3 গ্রিড তৈরি করেছি, কিন্তু আপনি সম্ভবত অনুমান করেছেন যে আমাদের সেখানে থামার দরকার নেই। আমরা কলাম এবং সারি ভেরিয়েবলের সংখ্যা তৈরি করতে পারি এবং যতগুলি চাই ততগুলি চিত্র যুক্ত করতে পারি।

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

সারি এবং কলামের সংখ্যার জন্য আমাদের কাছে দুটি নতুন ভেরিয়েবল রয়েছে। তারপরে আমরা তাদের ব্যবহার করে আমাদের গ্রিডের প্রস্থ এবং উচ্চতা সংজ্ঞায়িত করি। জন্য একই grid-template-columns যা ব্যবহার করে --m পরিবর্তনশীল এবং ঠিক আগের মতোই, আমাদের সারিগুলিকে স্পষ্টভাবে সংজ্ঞায়িত করার দরকার নেই যেহেতু CSS গ্রিডের স্বয়ংক্রিয়-প্লেসমেন্ট বৈশিষ্ট্যটি আমাদের জন্য কাজ করবে, আমরা যত ইমেজ উপাদান ব্যবহার করছি না কেন।

প্রস্থ এবং উচ্চতার জন্য আলাদা মান কেন নয়? আমরা এটা করতে পারি:

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --h: 120px; /* control the height */
  --w: 150px; /* control the width */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

.gallery img:hover{
  width:  calc(var(--w)*var(--f));
  height: calc(var(--h)*var(--f));
}

আমরা প্রতিস্থাপন করি --s দুটি ভেরিয়েবল সহ, একটি প্রস্থের জন্য, --w, এবং উচ্চতার জন্য আরেকটি, --h. তারপরে আমরা সেই অনুযায়ী অন্য সবকিছু সামঞ্জস্য করি।

সুতরাং, আমরা একটি নির্দিষ্ট আকার এবং উপাদানের সংখ্যা সহ একটি গ্রিড দিয়ে শুরু করেছি, কিন্তু তারপরে আমরা যে কোনো কনফিগারেশন পেতে ভেরিয়েবলের একটি নতুন সেট তৈরি করেছি। আমাদের যা করতে হবে তা হল আমরা যতগুলি চাই ততগুলি ইমেজ যুক্ত করতে হবে এবং সেই অনুযায়ী CSS ভেরিয়েবলগুলিকে সামঞ্জস্য করতে হবে। সমন্বয় সীমাহীন!

ছবির একটি পূর্ণ-স্ক্রীন গ্যালারি

একটি পূর্ণ-স্ক্রীন সংস্করণ সম্পর্কে কি? হ্যাঁ, এটাও সম্ভব। আমাদের যা দরকার তা হল আমাদের ভেরিয়েবলের জন্য আমাদের কী মান নির্ধারণ করতে হবে তা জানতে হবে। আমরা যদি চাই N ছবির সারি এবং আমরা আমাদের গ্রিড পূর্ণ স্ক্রীন হতে চাই, আমাদের প্রথমে একটি উচ্চতা সমাধান করতে হবে 100vh:

var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh

প্রস্থের জন্য একই যুক্তি, কিন্তু ব্যবহার করে vw পরিবর্তে vh:

var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw

আমরা পেতে গণিত করি:

--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)

সম্পন্ন!

এটি একই সঠিক HTML কিন্তু কিছু আপডেটেড ভেরিয়েবলের সাথে যা গ্রিডের আকার এবং আচরণ পরিবর্তন করে।

মনে রাখবেন যে আমরা পূর্বে সেট করা সূত্রটি বাদ দিয়েছি .galleryএর width এবং height এবং তাদের সাথে প্রতিস্থাপন 100vw এবং 100vh, যথাক্রমে। সূত্রটি আমাদের একই ফলাফল দেবে কিন্তু যেহেতু আমরা জানি যে আমরা কী মান চাই, তাই আমরা সেই সমস্ত জটিলতা বাদ দিতে পারি।

আমরা সহজ করতে পারেন --h এবং --w এর পক্ষে সমীকরণ থেকে ফাঁক সরিয়ে:

--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */

এটি হোভারড ইমেজটিকে আগের উদাহরণের তুলনায় একটু বেশি বাড়াতে সাহায্য করবে, তবে এটি কোন বড় ব্যাপার নয় যেহেতু আমরা স্কেলটি নিয়ন্ত্রণ করতে পারি --f পরিবর্তনশীল আমরা একটি গুণক হিসাবে ব্যবহার করছি.

এবং যেহেতু ভেরিয়েবলগুলি এক জায়গায় ব্যবহার করা হয় আমরা এখনও কোডটিকে সম্পূর্ণ সরিয়ে দিয়ে সহজ করতে পারি:

এটা মনে রাখা গুরুত্বপূর্ণ যে এই অপ্টিমাইজেশনটি শুধুমাত্র পূর্ণ-স্ক্রীন উদাহরণের ক্ষেত্রে প্রযোজ্য এবং আমরা যে উদাহরণগুলি কভার করেছি তার ক্ষেত্রে নয়৷ এই উদাহরণটি একটি নির্দিষ্ট ক্ষেত্রে যেখানে আমরা অন্যান্য উদাহরণে আমাদের প্রয়োজনীয় কিছু জটিল গণনা কাজ সরিয়ে কোডটিকে হালকা করতে পারি।

প্যানেল সম্প্রসারণের জনপ্রিয় প্যাটার্ন তৈরি করার জন্য আমাদের যা প্রয়োজন তা আসলে আমাদের কাছে রয়েছে:

এর আরও গভীর খনন করা যাক

আপনি কি লক্ষ্য করেছেন যে আমাদের স্কেল ফ্যাক্টর এর চেয়ে কম হতে পারে 1? আমরা হোভার্ড ইমেজের আকারকে এর চেয়ে ছোট হিসাবে সংজ্ঞায়িত করতে পারি --h or --w কিন্তু ইমেজ হোভারে বড় হয়।

প্রারম্ভিক গ্রিড ঘরের আকার সমান --w এবং --h, তাহলে কেন একটি ছোট মান গ্রিড সেল তৈরি করে বড়? সেল পাওয়া উচিত নয় ক্ষুদ্রতর, বা অন্তত তার প্রাথমিক আকার বজায় রাখা? এবং গ্রিড ঘরের চূড়ান্ত আকার কত?

সিএসএস গ্রিড অ্যালগরিদম কীভাবে গ্রিড কোষের আকার গণনা করে তা আমাদের আরও গভীরভাবে খনন করতে হবে। এবং এটি সিএসএস গ্রিডের ডিফল্ট বোঝার সাথে জড়িত প্রসারিত প্রান্তিককরণ.

যুক্তি বোঝার জন্য এখানে একটি উদাহরণ।

ডেমোর বাম দিকে, আমি একটি দুই-কলাম সংজ্ঞায়িত করেছি auto প্রস্থ আমরা স্বজ্ঞাত ফলাফল পাই: দুটি সমান কলাম (এবং দুটি সমান গ্রিড কোষ)। কিন্তু আমি ডেমোর ডানদিকে যে গ্রিড সেট আপ করেছি, যেখানে আমি ব্যবহার করে প্রান্তিককরণ আপডেট করছি place-content: start, কিছুই নেই বলে মনে হচ্ছে।

DevTools উভয় ক্ষেত্রেই আসলে কী ঘটছে তা দেখাতে সাহায্য করে:

দ্বিতীয় গ্রিডে, আমাদের দুটি কলাম আছে, কিন্তু তাদের প্রস্থ শূন্যের সমান, তাই আমরা গ্রিড কন্টেইনারের উপরের-বাম কোণে দুটি গ্রিড সেল পাই। এই না একটি বাগ কিন্তু গ্রিডের প্রান্তিককরণের যৌক্তিক ফলাফল। যখন আমরা একটি কলাম (বা সারি) এর সাথে সাইজ করি auto, এর মানে হল যে এর বিষয়বস্তু তার আকার নির্দেশ করে — কিন্তু আমাদের কাছে একটি খালি আছে div জন্য জায়গা করতে কোন বিষয়বস্তু সঙ্গে.

কিন্তু যেহেতু stretch ডিফল্ট অ্যালাইনমেন্ট এবং আমাদের গ্রিডের ভিতরে পর্যাপ্ত জায়গা আছে, ব্রাউজারটি সমস্ত এলাকা কভার করার জন্য উভয় গ্রিড কোষকে সমানভাবে প্রসারিত করবে। এভাবেই বাম দিকের গ্রিড দুটি সমান কলামের সাথে বায়ু করে।

থেকে স্পেসিফিকেশন:

উল্লেখ্য যে নির্দিষ্ট মান justify-content এবং align-content ট্র্যাকগুলিকে আলাদা করে ফেলার কারণ হতে পারে (space-around, space-between, space-evenly) বা পুনরায় আকার দিতে হবে (stretch).

"আকারের আকার পরিবর্তন করতে হবে" নোট করুন যা এখানে কী। শেষ উদাহরণে, আমি ব্যবহার করেছি place-content যার জন্য শর্টহ্যান্ড justify-content এবং align-content

এবং এটি কোথাও দাফন করা হয়েছে গ্রিড সাইজিং অ্যালগরিদম চশমা:

এই পদক্ষেপটি এমন ট্র্যাকগুলিকে প্রসারিত করে যেগুলির একটি রয়েছে৷ গাড়ী সর্বোচ্চ ট্র্যাক সাইজিং ফাংশন যে কোন অবশিষ্ট ধনাত্মককে ভাগ করে, নির্দিষ্ট মুক্ত স্থান তাদের মধ্যে সমানভাবে। খালি জায়গা থাকলে অনির্দিষ্ট, কিন্তু গ্রিড ধারক একটি নির্দিষ্ট আছে সর্বনিম্ন-প্রস্থ/উচ্চতা, পরিবর্তে এই ধাপের জন্য ফাঁকা স্থান গণনা করতে সেই আকারটি ব্যবহার করুন।

"সমানভাবে" ব্যাখ্যা করে যে কেন আমরা সমান গ্রিড কোষ দিয়ে আবদ্ধ হই, কিন্তু এটি "মুক্ত স্থান"-এর ক্ষেত্রে প্রযোজ্য যা খুবই গুরুত্বপূর্ণ।

এর আগের উদাহরণ নেওয়া যাক এবং এর একটিতে বিষয়বস্তু যোগ করা যাক divs:

আমরা একটি বর্গক্ষেত্র যোগ করেছি 50px ইমেজ আমাদের উদাহরণের প্রতিটি গ্রিড সেই চিত্রটিতে কীভাবে প্রতিক্রিয়া জানায় তার একটি চিত্র এখানে রয়েছে:

প্রথম ক্ষেত্রে, আমরা দেখতে পাচ্ছি যে প্রথম ঘরটি (লাল রঙে) দ্বিতীয়টি (নীল রঙে) থেকে বড়। দ্বিতীয় ক্ষেত্রে, প্রথম কক্ষের আকার চিত্রের শারীরিক আকারের সাথে মানানসই হয়ে যায় যখন দ্বিতীয় কক্ষটি কোন মাত্রা ছাড়াই থাকে। মুক্ত স্থানটি সমানভাবে বিভক্ত, তবে প্রথম কক্ষের ভিতরে আরও সামগ্রী রয়েছে যা এটিকে বড় করে তোলে।

আমাদের খালি জায়গা বের করার জন্য এটি হল গণিত:

(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px 

দুই দ্বারা বিভক্ত - কলামের সংখ্যা - আমরা একটি প্রস্থ পাই 72.5px প্রতিটি কলামের জন্য। কিন্তু আমরা ছবির আকার যোগ করি, 50px, প্রথম কলামে যা আমাদেরকে একটি কলাম দিয়ে ছেড়ে যায় 122.5px এবং দ্বিতীয়টি সমান 72.5px.

একই যুক্তি আমাদের ইমেজ গ্রিড প্রযোজ্য. সব ছবির সমান সাইজ আছে 0 (কোন বিষয়বস্তু নেই) যখন হোভার করা চিত্রটি আকারে অবদান রাখে — এমনকি যদি তা ঠিক হয় 1px — এর গ্রিড সেল অন্যদের থেকে বড় করে। এই কারণে, স্কেল ফ্যাক্টর এর চেয়ে বড় যেকোনো মান হতে পারে 0 এমনকি মধ্যে দশমিক 0 এবং 1.

গ্রিড কোষের চূড়ান্ত প্রস্থ পেতে, আমরা নিম্নলিখিতগুলি পেতে একই গণনা করি:

(container width) - (sum of all gaps) - (hovered image width) = (free space)

পাত্রের প্রস্থ দ্বারা সংজ্ঞায়িত করা হয়:

var(--m)*var(--w) + (var(--m) - 1)*var(--g)

…এবং সমস্ত ফাঁক সমান:

(var(--m) - 1)*var(--g)

…এবং হোভার করা ছবির জন্য আমাদের আছে:

var(--w)*var(--f)

আমরা আমাদের ভেরিয়েবলের সাহায্যে সেগুলির সমস্ত হিসাব করতে পারি:

var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))

কলাম সংখ্যা দ্বারা সংজ্ঞায়িত করা হয় --m ,সুতরাং আমরা সেই মুক্ত স্থানটি পেতে সমানভাবে ভাগ করি:

var(--w)*(var(--m) - var(--f))/var(--m)

…যা আমাদের নন-হোভার করা ছবিগুলোর আকার দেয়। হোভার করা চিত্রগুলির জন্য, আমাদের এটি রয়েছে:

var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))

আমরা যদি হোভার করা ছবির চূড়ান্ত আকার নিয়ন্ত্রণ করতে চাই, তাহলে আমরা যে আকার চাই তা পেতে উপরের সূত্রটি বিবেচনা করি। যদি, উদাহরণস্বরূপ, আমরা ইমেজটি দ্বিগুণ বড় হতে চাই:

(var(--m) - var(--f))/var(--m) + var(--f) = 2

সুতরাং, আমাদের স্কেল গুণকের মান, --f, এর সমান হতে হবে:

var(--m)/(var(--m) - 1)

তিনটি কলামের জন্য আমাদের থাকবে 3/2 = 1.5 এবং এই স্কেল ফ্যাক্টরটি আমি এই নিবন্ধের প্রথম ডেমোতে ব্যবহার করেছি কারণ আমি হোভারে ছবিটিকে দ্বিগুণ বড় করতে চেয়েছিলাম!

একই যুক্তি উচ্চতা গণনার ক্ষেত্রে প্রযোজ্য এবং যদি আমরা তাদের উভয়কে স্বাধীনভাবে নিয়ন্ত্রণ করতে চাই তবে আমাদের একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা আছে তা নিশ্চিত করতে দুটি স্কেল ফ্যাক্টর বিবেচনা করতে হবে।

.gallery {
  /* same as before */
   --fw: 1.5; /* controls the scale factor for the width */
   --fh: 1.2; /* controls the scale factor for the height */

  /* same as before */
}

.gallery img:hover{
  width:  calc(var(--w)*var(--fw));
  height: calc(var(--h)*var(--fh));
}

এখন, আপনি আমাদের এইমাত্র কভার করা গণিত ব্যবহার করে আপনি যে সাইজিং করতে চান তা নিয়ন্ত্রণ করার পাশাপাশি একটি শীতল হোভার ইফেক্ট সহ যেকোনো ধরনের ইমেজ গ্রিড তৈরি করার সমস্ত গোপনীয়তা জানেন।

মোড়ক উম্মচন

আমার মধ্যে শেষ নিবন্ধ, আমরা CSS-এর কয়েকটি লাইনের সাথে একটি জটিল-সুদর্শন গ্রিড তৈরি করেছি যা CSS গ্রিডের অন্তর্নিহিত গ্রিড এবং স্বয়ংক্রিয়-প্লেসমেন্ট বৈশিষ্ট্যগুলিকে ব্যবহার করে। এই প্রবন্ধে, আমরা কিছু CSS গ্রিড সাইজিং কৌশলের উপর নির্ভর করেছি ছবির একটি অভিনব গ্রিড তৈরি করতে যা হোভারে জুম করে এবং সেই অনুযায়ী গ্রিডকে সামঞ্জস্য করে। এই সবই একটি সরলীকৃত কোডের সাথে যা CSS ভেরিয়েবল ব্যবহার করে সামঞ্জস্য করা সহজ!

পরবর্তী নিবন্ধে, আমরা আকার নিয়ে খেলব! আমরা ছবিগুলির অভিনব গ্রিড পেতে মাস্ক এবং ক্লিপ-পাথের সাথে CSS গ্রিডকে একত্রিত করব।