تصاویر مربع و گرد در CSS: راهنمای من آرزو می کردم بخوانم

در این راهنمای ساده و در عین حال کامل، به شما نشان خواهم داد که چگونه هر تصویر را مربع یا گرد در CSS بسازید.

ساخت دور تصویر در CSS کاملا امکان پذیر است.

فقط درخواست کنید border-radius: 50% به او. اما اگر تصویر مربع نباشد، بیضی خواهد بود:

به طور خلاصه، تصویر گرد یک تصویر مربعی با border-radius: 50%، نه کمتر نه بیشتر.

بنابراین، قبل از گرد کردن یک تصویر، ابتدا به شما نشان خواهم داد که چگونه آن را مربع کنید.

هنگام تماشای این ویدیو توسط ماریو سوتو، متوجه شدم که لیستی از خطاهای طراحی در CSS وجود دارد.

یکی ایجاد این خاصیت به نام بود border-radius که دور نکات. border-radius شما باید گرد کنید لبه ها. بنابراین نام ملک صحیح خواهد بود corner-radius.

کنجکاو، ها؟

اما ابتدا چند هشدار.

نکات مهم در مورد تصاویر مربع و گرد در CSS

این آموزش با هر اندازه تصویر کار می کند.

هر اندازه تصویر

با اينكه، در حالت ایده آل، تصویر اصلی باید تا حد امکان نزدیک به مربع باشد.. این بدان معناست که هر چه اختلاف عرض و ارتفاع بیشتر باشد، برش در این تصویر بیشتر است.

این بدان معنا نیست که تصویری که خیلی بلند یا خیلی پهن است را نمی توان در CSS مربع یا گرد کرد. فقط این که نتیجه ممکن است چندان خوشایند نباشد.

نکته مهم دیگر در مورد عملکرد است. اگر یک تصویر مربع یا گرد 1000×200 را ترک کردید، در 200×200 یک قطعه 800×200 بیهوده دانلود شد.

شما همیشه این گزینه را دارید که قبل از آپلود در سایت، یک تصویر را برش داده و آن را گرد کنید. فقط از فتوشاپ، گیمپ یا سایر برنامه های ویرایش استفاده کنید. این به زمان بارگذاری و تجربه صفحه شما کمک می کند.

اگر کار زیاد است، سعی کنید آن را حداقل مربع کنید، این کار را بسیار آسان‌تر می‌کند. اگر باز هم کار نکرد، ادامه مطلب را بخوانید و من به شما نشان خواهم داد که چگونه همه این کارها را با CSS انجام دهید.

نحوه ایجاد یک تصویر گرد در CSS

به طور خلاصه آنچه اتفاق می افتد به شرح زیر است.

اولین، شما باید آن را مربع کنید. این کار قابل انجام است:

• با ملک aspect-ratio
• یا با یک ظرف در اطراف تصویر

مرحله دوم و آخر درخواست است border-radius: 50% به او.

جایگزین دیگر استفاده از clip-path: circle(50%) برای ایجاد برش در تصویر. کارکرد circle() تعیین می کند که این برش به شکل دایره باشد، در حالی که مقدار 50% اندازه شعاع آن را اعلام می کند.

اما لازم است بگویم که گزینه اول بیشتر مورد قبول مرورگرها است. درباره مسیر کلیپ در MDN بیشتر ببینید.

با ویژگی Aspect-ratio یک تصویر گرد در CSS ایجاد کنید

برای شروع، فقط به تصویر در HTML نیاز دارید:

<img
  src="https://images.unsplash.com/photo-1686890121533-ac7aecfb15cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
  alt="doguinho"
  class="image"
/>

E بدون CSS:

.image {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

عملکرد هر ملک را ببینید:

• width: 100%: تصویر را مجبور می کند تا تمام فضایی که به آن داده اید را اشغال کند. این ویژگی و ویژگی بعدی مربوط به پاسخگویی است
• max-width: 400px: این ویژگی اختیاری است. می‌توانید مقدار را متناسب با مورد خود حذف یا تغییر دهید. در صورت نیاز، از یک مقدار در استفاده کنید rem. در مورد مقادیر مطلق و نسبی در CSS بیشتر ببینید
• aspect-ratio: 1/1: این خاصیتی است که تصویر را مربع می کند، اما در عین حال آن را مخدوش می کند
• object-fit: cover: تصویر را برش می دهد و از اعوجاج خاصی که خاصیت قبلی ایجاد کرده است جلوگیری می کند
• border-radius: 50%: همانطور که در ابتدا گفتم این خاصیت آن را گرد می کند.

این ویژگی ها را یکی یکی اعمال کنید و شاهد وقوع جادو باشید.

همه چیز خیلی خوب است، اما باید صادقانه بگویم. امروز، ملک aspect-ratio مورد قبول مرورگرها نیست (90%). بنابراین این استراتژی ممکن است در همه موارد کارساز نباشد.

راه دیگری برای ایجاد یک تصویر دایره ای در CSS با استفاده از یک ظرف وجود دارد.

با یک ظرف یک تصویر گرد در CSS بسازید

در اینجا HTML دستخوش تغییر می شود.

دو تا بذار divدر اطراف تصویر، آنها برای تعیین نسبت و موقعیت استفاده می کنند:

<div class="container">
  <div class="inner">
    <img
      src="https://images.unsplash.com/photo-1686890121533-ac7aecfb15cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
      alt="doguinho"
      class="image"
    />
  </div>
</div>

اکنون فقط سبک CSS را برای هر تگ اعمال کنید.

• آ div از بیرون که زنگ زدم container، عرض تصویر را کنترل می کند
• آ div داخلی، (inner) هم مسئولیت اندازه و هم موقعیت را بر عهده دارد
• در نهایت، CSS تصویر آن را قرار می دهد، اندازه، تناسب و گرد بودن آن را تنظیم می کند

درست بعد از کد، هر خط را توضیح می دهم:

.container {
  width: 100%;
  max-width: 400px; /* opcional */
  outline: 4px dashed red; /* opcional */
}

.inner {
  position: relative;
  height: 0;
  padding-bottom: 100%;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

اکنون ببینید هر ویژگی CSS از div چه می کند container:

• width: 100%: اجبار به div اشغال تمام فضای موجود این ویژگی و ویژگی بعدی مربوط به پاسخگویی است
• max-width: 400px: این ویژگی اختیاری است. می‌توانید مقدار را متناسب با مورد خود حذف یا تغییر دهید. در صورت نیاز، از یک مقدار در استفاده کنید rem. در مورد مقادیر مطلق و نسبی در CSS بیشتر ببینید
• outline: فقط برای کمک بصری برای یافتن container. وقتی همه چیز تمام شد، می توانید آن را حذف کنید.

یک دیو inner همچنین وظایف خود را دارد:

• position: relative: آن را به مرجع تصویر تبدیل کنید (جزئیات بیشتر در زیر)
• height: 0: ارتفاع ظرف را بازنشانی می کند. اما چگونه می توان تصویر را نمایش داد؟ اعمال ویژگی بعدی
• padding-bottom: 100%: سحر و جادو، تمام تصویر شما این است padding، نه محتوا اکنون این را با جزئیات بیشتر توضیح خواهم داد (تسلیم نشوید)

در نهایت به CSS تصویر نگاه کنید:

• position: absolute: موقعیت تصویر را نسبت به عنصر والد (inner) نه برادران
• width: 100% ه height: 100%: فضای عنصر والد را کاملا پر می کند اما با اعوجاج
• object-fit: cover: تصویر را برش می دهد و اعوجاج را حذف می کند
• border-radius: 50%: گردش کن

نتیجه همان خواهد بود که قبلاً نشان دادم:

باشه حالا قول دادم رو توضیح میدم ببین زیاد طول نکشید 🙂

چه اتفاقی برای بالشتک پایین افتاد؟

آیا مسئولیت این ملک را به خاطر دارید؟

همه شما از تصویر هستید padding، نه محتوا

مشاهده یک تصویر در یک div بدون هیچ CSS وقتی ماوس را روی عناصر در DevTools نگه می‌دارم، تصویر فضای آبی روی صفحه را اشغال می‌کند. این بدان معنی است که منطقه بخشی از محتوا است.

اکنون پس از اعمال استایل روی کانتینرها و تصویر، یک ناحیه سبز رنگ اشغال می کند، یعنی دیگر محتوا نیست، بلکه padding-bottom انجام دادن inner.

با قرار دادن a height: 30px نه inner، این فضای آبی را ایجاد می کنید که ناحیه محتوا است.

اگر این توضیح عجیب به نظر می رسد، توصیه می کنم مفاهیم مدل جعبه را مرور کنید. همچنین ارزش آن را دارد که تصویر را در DevTools پس از اتمام بررسی کنید. به این ترتیب همه چیز منطقی تر خواهد شد.

پس از درک اینکه تصویر فضای آن را اشغال می کند padding-bottom، یک جزئیات گم شده است. چگونه توانستم نسبت مربع او را تعریف کنم؟

ویژگی padding-bottom با مقدار درصد از عرض عنصر والد به عنوان مرجع استفاده می کند. یعنی با وجود اینکه خاصیت محور عمودی است، از محور افقی به عنوان مرجع استفاده می کند. خیلی اتفاق می افتد با padding-bottom, چقدر با padding-top.

بنابراین اگر container 100 پیکسل عرض دارد و inner tem padding-bottom: 30%، این منجر به 30 پیکسل می شود padding-bottom.

لوگو:

• مقادیر زیر 100٪ یک تصویر عریض با ارتفاع کمتر از عرض ایجاد می کنند
• و مقادیر بالای 100٪ یک تصویر عمودی با ارتفاع بیشتر از عرض ایجاد می کنند

حالا به این خط استدلال نگاه کنید: یک مربع اضلاع دارد برابر است. یک عدد است برابر به دیگری زمانی که یکی برابر با 100٪ دیگری باشد. پس بله، شما آن را حدس زدید، یک بالشتک 100٪ نسبت یک طرفه را ایجاد می کند، یعنی مربع 😍.

حالا… آیا متوجه شدید که تمام تصاویر دایره ای شکل در CSS روی مرکز آن تمرکز می کنند؟

امکان تغییر این وجود دارد.

نحوه تغییر نقطه کانونی یک تصویر گرد در CSS

خوب، چیز اصلی که قبلاً می دانید. اما می تواند جلوتر هم برود.

گرد کردن یا مربع کردن یک تصویر، لبه های آن را قطع می کند. این یک ناحیه از آن را پنهان می کند، در حالی که منطقه دیگری را که من آن را فوکوس می نامم نمایش می دهد.

اگر قسمت مخفی و فوکوس را انتخاب نکنید، خود CSS این کار را برای شما انجام می دهد. و هر که این کار را انجام دهد مال است object-position. مقدار پیش فرض آن است 50% 50%، یعنی به ترتیب به صورت افقی و عمودی در مرکز قرار می گیرد. برای تغییر این از مقادیر درصد دیگری استفاده کنید.

راه آسان دیگر استفاده از کلمات رزرو شده است. اگر تصویر عریض است، از مقادیر استفاده کنید left برای تمرکز روی سمت چپ:

یا right تمرکز بر سمت راست:

اگر تصویر بلندتر است، می توانید بر روی بالا تمرکز کنید (top):

یا در پس زمینه (bottom):

در مورد ملک بیشتر ببینید object-position از MDN.

بنابراین، علاوه بر ایجاد تصاویر گرد CSS شیک، شما انتخاب می کنید که کدام منطقه را می خواهید نمایش دهید.

پاسخ به تماس

تصویر گرد یک تصویر مربعی با border-radius: 50% یا clip-path: circle(50%).

شما می توانید هر تصویری را در CSS مربع یا دایره بسازید. اما بدانید که هرچه اختلاف عرض و ارتفاع کمتر باشد نتیجه بهتری خواهید داشت.

با این ویژگی می توانید یک تصویر را در CSS قاب کنید aspect-ratio: 1/1. یا از سحر و جادو استفاده کنید padding-bottom و تصویر را داخل ظرفی با نسبت 1/1 قرار دهید.

از ملک استفاده کنید object-position برای نمایش قسمت خاصی از تصویر پس از برش. در غیر این صورت، تمرکز همیشه روی مرکز خواهد بود.

راه دیگری برای ایجاد یک تصویر در CSS وجود دارد که با ویژگی است background-image، و نه با برچسب <img />.

از آنجایی که این حالت اجازه استفاده از ویژگی را نمی دهد alt، صفحه خوان ها آن را شناسایی نمی کنند. بنابراین من فقط به شما توصیه می کنم این کار را زمانی انجام دهید که تصویر فقط یک منبع بصری است که به هیچ وجه محتوای صفحه را تکمیل نمی کند.

تصمیم گرفتم اکنون در مورد این استراتژی ننویسم، اما این یک ایده عالی برای آینده است.

مانند سایر پست های اینجا در وبلاگ، این مطالب با شادی فراوان نوشته شده است. به این دلیل که این یکی از تردیدهای بزرگی بود که در ابتدای کارم داشتم و هرگز نمی دانستم چگونه آن را حل کنم. همچنین یافتن توضیح کاملی از مربع، گرد، نسبت ابعاد و غیره دشوار بود.

با تشکر فراوان برای خواندن شما!

نظرتون رو در کامنت بنویسید یا سوالی داشتید😄