گرڈ لے آؤٹ میں تصاویر کو زوم کرنا

سی ایس ایس گرڈ کی بدولت تصاویر کا گرڈ بنانا آسان ہے۔ لیکن گرڈ بنانا فینسی چیزیں کرتے ہیں۔ کے بعد تصاویر رکھ دی گئی ہیں ان کو کھینچنا مشکل ہو سکتا ہے۔

کہتے ہیں کہ آپ ان تصاویر میں کچھ فینسی ہوور اثر شامل کرنا چاہتے ہیں جہاں وہ بڑھتے ہیں اور قطاروں اور کالموں سے آگے زوم کرتے ہیں جہاں وہ بیٹھتے ہیں؟ ہم ایسا کر سکتے ہیں!

ٹھنڈا، ٹھیک ہے؟ اگر آپ کوڈ چیک کرتے ہیں، تو آپ کو کوئی جاوا اسکرپٹ، پیچیدہ سلیکٹرز، یا یہاں تک کہ نہیں ملے گا۔ جادو نمبر. اور یہ بہت سے لوگوں کے درمیان صرف ایک مثال ہے جسے ہم دریافت کریں گے!

گرڈ کی تعمیر

گرڈ بنانے کے لیے ایچ ٹی ایم ایل کوڈ اتنا ہی آسان ہے جتنا کسی کنٹینر میں موجود تصاویر کی فہرست۔ ہمیں اس سے زیادہ کی ضرورت نہیں ہے۔

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

سی ایس ایس کے لیے، ہم سب سے پہلے درج ذیل کا استعمال کرتے ہوئے گرڈ ترتیب دے کر شروع کرتے ہیں:

.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 چیزوں کو تناسب میں رکھنے میں مدد کرتا ہے۔

آپ سوچ رہے ہوں گے کہ ہم صرف تین کالم کیوں بیان کر رہے ہیں لیکن کوئی قطار نہیں۔ نہیں، میں قطاروں کو نہیں بھولا — ہمیں انہیں واضح طور پر سیٹ کرنے کی ضرورت نہیں ہے۔ سی ایس ایس گرڈ خود بخود آئٹمز رکھنے کے قابل ہے۔ مضمر قطاریں اور کالم، یعنی ہمیں اتنی ہی قطاریں مل جاتی ہیں جتنی تصویریں ہم اس پر پھینکتے ہیں۔ اس کے بجائے ہم واضح طور پر قطاروں کی وضاحت کر سکتے ہیں لیکن ہمیں شامل کرنے کی ضرورت ہے۔ 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% کس؟ فیصد استعمال کرتے وقت، قدر ہوتی ہے۔ کسی اور چیز سے متعلق. اس صورت میں، ہماری تصویر a کے اندر رکھی جاتی ہے۔ گرڈ سیل اور ہمیں یہ جاننے کے لیے اس سائز کو جاننے کی ضرورت ہے کہ کیا ہے۔ 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)، دوسرے گرڈ سیلز کو برقرار رکھنے کے لیے چھوٹے ہو کر منطقی طور پر جواب دیں گے۔ .gallerytact میں مجموعی سائز.

یہ عمل میں ہمارا زوم اثر ہے! صرف ایک تصویر کے سائز کو بڑھا کر ہم پوری گرڈ کی ترتیب کو متاثر کرتے ہیں، اور ہم نے اس سے پہلے کہا کہ گرڈ تصویروں کے سائز کی وضاحت کرتا ہے تاکہ ہر تصویر اپنے گرڈ سیل کے اندر پھیلے تمام جگہ کو بھر سکے۔

اس کے لیے، ہم ایک ٹچ شامل کرتے ہیں۔ 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)

ہو گیا!

یہ بالکل وہی ایچ ٹی ایم ایل ہے لیکن کچھ اپ ڈیٹ شدہ متغیرات کے ساتھ جو گرڈ کے سائز اور طرز عمل کو تبدیل کرتے ہیں۔

نوٹ کریں کہ میں نے اس فارمولے کو چھوڑ دیا ہے جو ہم نے پہلے سیٹ کیا تھا۔ .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تو ایک چھوٹی قدریں گرڈ سیل کیوں بناتی ہیں۔ بڑا? سیل نہیں ملنا چاہئے؟ چھوٹے، یا کم از کم اس کے ابتدائی سائز کو برقرار رکھیں؟ اور گرڈ سیل کا حتمی سائز کیا ہے؟

ہمیں گہرائی میں کھودنے کی ضرورت ہے کہ کس طرح CSS گرڈ الگورتھم گرڈ سیلز کے سائز کا حساب لگاتا ہے۔ اور اس میں CSS گرڈ کے ڈیفالٹ کو سمجھنا شامل ہے۔ مسلسل سیدھ.

منطق کو سمجھنے کے لیے یہاں ایک مثال ہے۔

ڈیمو کے بائیں جانب، میں نے ایک دو کالم کی وضاحت کی۔ 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

اور یہ کہیں دفن ہے۔ گرڈ سائزنگ الگورتھم شبیہیں:

یہ قدم ان پٹریوں کو پھیلاتا ہے جن میں ایک ہے۔ آٹو زیادہ سے زیادہ ٹریک sizing تقریب کسی بھی مثبت کو تقسیم کرکے، خاص مفت خلا ان کے درمیان یکساں طور پر. اگر خالی جگہ ہے۔ غیر معینہ، لیکن گرڈ کنٹینر ایک یقینی ہے کم سے کم چوڑائی/اونچائیاس کے بجائے اس قدم کے لیے خالی جگہ کا حساب لگانے کے لیے اس سائز کا استعمال کریں۔

"برابر" وضاحت کرتا ہے کہ ہم مساوی گرڈ سیلز کے ساتھ کیوں سمیٹتے ہیں، لیکن یہ "خالی جگہ" پر لاگو ہوتا ہے جو بہت اہم ہے۔

آئیے پچھلی مثال لیں اور ان میں سے ایک میں مواد شامل کریں۔ 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 گرڈ کو ماسک اور کلپ پاتھ کے ساتھ جوڑیں گے۔