بزرگنمایی تصاویر در طرح بندی شبکه ای

ایجاد شبکه ای از تصاویر به لطف CSS Grid آسان است. اما وادار کردن شبکه به انجام کارهای فانتزی بعد از تصاویری که قرار داده شده اند ممکن است دشوار باشد.

می‌گویید می‌خواهید افکت شناور فانتزی را به تصاویری که در آن رشد می‌کنند اضافه کنید و از سطرها و ستون‌هایی که در آن قرار دارند بزرگنمایی کنید؟ میتوانیم انجامش دهیم!

باحال، درسته؟ اگر کد را بررسی کنید، هیچ جاوا اسکریپت، انتخابگر پیچیده یا حتی پیدا نخواهید کرد اعداد جادویی. و این تنها یک نمونه از بسیاری از مواردی است که بررسی خواهیم کرد!

ساخت شبکه

کد HTML برای ایجاد شبکه به سادگی لیستی از تصاویر درون یک ظرف است. ما بیشتر از این نیاز نداریم

<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 قادر است به طور خودکار موارد را روی آن قرار دهد ردیف ها و ستون های ضمنی، به این معنی که برای هر تعداد تصویری که به آن پرتاب می کنیم، به تعداد ردیف هایی که لازم است می گیریم. به جای آن می‌توانیم به‌صراحت ردیف‌ها را تعریف کنیم، اما باید اضافه کنیم grid-auto-flow: column تا مطمئن شویم که مرورگر ستون های مورد نیاز را برای ما ایجاد خواهد کرد.

در اینجا یک مثال برای توضیح هر دو مورد آورده شده است. تفاوت این است که یکی در a جریان دارد row جهت دیگری در a 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، سایر سلول های شبکه به طور منطقی با کوچکتر شدن پاسخ می دهند تا حفظ کنند .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 Grid بدون توجه به تعداد عناصر تصویری که استفاده می‌کنیم، این کار را برای ما انجام می‌دهد.

چرا مقادیر متفاوتی برای عرض و ارتفاع وجود ندارد؟ میتوانیم انجامش دهیم:

.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's 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 Grid کاوش کنیم. و این شامل درک پیش‌فرض CSS Grid است تراز کششی.

در اینجا یک مثال برای درک منطق آورده شده است.

در سمت چپ دموی دو ستونی با تعریف کردم 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

و این در جایی دفن شده است الگوریتم Grid 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 Grid و ویژگی های قرار دادن خودکار استفاده می کند. در این مقاله، ما به برخی از ترفندهای اندازه‌گیری CSS Grid برای ایجاد یک شبکه فانتزی از تصاویر که با شناور بزرگ‌نمایی می‌کنند و باعث می‌شود شبکه مطابق با آن تنظیم شود، تکیه کردیم. همه اینها با یک کد ساده که به راحتی با استفاده از متغیرهای CSS قابل تنظیم است!

در مطلب بعدی با اشکال بازی می کنیم! ما شبکه CSS را با ماسک و مسیر کلیپ ترکیب می کنیم تا شبکه ای زیبا از تصاویر بدست آوریم.