یک شیرجه عمیق به شی متناسب و اندازه پس زمینه در CSS – مجله Smashing

خلاصه سریع ↬

در این مقاله به نحوه انجام آن می پردازیم object-fit و background-size کار، چه زمانی می توانیم از آنها استفاده کنیم، و چرا، همراه با برخی موارد استفاده عملی و توصیه ها. بیایید شیرجه بزنیم

ما همیشه قادر به بارگذاری تصاویر با اندازه های مختلف برای یک عنصر HTML نیستیم. اگر از عرض و ارتفاع متناسب با نسبت تصویر تصویر استفاده کنیم ، ممکن است تصویر فشرده یا کشیده شود. این خوب نیست، و می توان آن را با هر دو حل کرد object-fit برای یک img عنصر یا با استفاده از background-sizeبه

ابتدا بیایید مشکل را تعریف کنیم. شکل زیر را در نظر بگیرید:

چرا این اتفاق می افتد؟

یک تصویر دارای نسبت تصویر است و مرورگر کادر حاوی آن تصویر را پر می کند. اگر نسبت تصویر با عرض و ارتفاع مشخص شده برای آن متفاوت باشد ، در نتیجه تصویر یا فشرده یا کشیده خواهد بود.

این را در شکل زیر می بینیم:

راه حل

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

اکنون که متوجه شدیم چگونه کار می کند، بیایید به نحوه عملکرد آن در مرورگر بپردازیم. (هشدار اسپویلر: راحت تر است!)

CSS object-fit

را object-fit ویژگی چگونگی محتوای یک عنصر جایگزین شده را مشخص می کند img یا video باید اندازه آن متناسب با ظرف آن باشد. مقدار پیش فرض برای object-fit است fill، که می تواند منجر به فشرده شدن یا کشیده شدن تصویر شود.

بیایید به مقادیر ممکن بپردازیم.

مقادیر ممکن برای object-fit

object-fit: contain

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

object-fit: cover

در اینجا، اندازه تصویر نیز برای تناسب با نسبت ابعاد ظرف خود تغییر می‌کند و اگر نسبت تصویر با ظرف مطابقت نداشته باشد، برای تناسب آن بریده می‌شود.

object-fit: fill

با این کار، اندازه تصویر متناسب با نسبت ابعاد ظرف خود تغییر می کند و اگر نسبت تصویر با ظرف مطابقت نداشته باشد، یا فشرده یا کشیده می شود. ما این را نمی خواهیم.

object-fit: none

در این حالت، اندازه تصویر به هیچ وجه تغییر نمی کند، نه کشیده و نه فشرده می شود. مانند آن کار می کند cover ارزش، اما نسبت ابعاد ظرف خود را رعایت نمی کند.

جدای از object-fit، ما همچنین داریم object-position ویژگی، که وظیفه قرار دادن یک تصویر در ظرف خود را بر عهده دارد.

مقادیر ممکن برای object-position

را object-position ویژگی مشابه با CSS کار می کند background-position ویژگی:

را top و bottom کلمات کلیدی همچنین زمانی کار می کنند که نسبت ابعاد جعبه حاوی عمودی بزرگتر باشد:

CSS background-size

با background-size، اولین تفاوت این است که ما با پس زمینه سر و کار داریم نه HTML (img) عنصر.

مقادیر ممکن برای background-size

مقادیر ممکن برای background-size هستند auto، contain، و coverبه

background-size: auto

با auto، تصویر در اندازه پیش فرض خود باقی می ماند:

background-size: cover

در اینجا، اندازه تصویر تغییر می کند تا در ظرف قرار گیرد. اگر نسبت ابعاد یکسان نباشد ، تصویر برای تناسب پوشانده می شود.

background-size: contain

در این حالت، اندازه تصویر به گونه ای تغییر می کند که در ظرف قرار گیرد. اگر نسبت‌های تصویر خاموش باشند، همانطور که در مثال بعدی نشان داده شده است، تصویر در جعبه نامه قرار می‌گیرد:

با توجه به background-position، شبیه چگونه است object-position آثار. تنها تفاوت این است که موقعیت پیش فرض از object-position متفاوت از آن است background-positionبه

زمان عدم استفاده object-fit یا background-size

اگر به عنصر یا تصویر یک ارتفاع ثابت داده شود و هر کدام را داشته باشد background-size: cover یا object-fit: cover اگر روی آن اعمال شود، نقطه ای وجود خواهد داشت که تصویر بیش از حد گسترده خواهد بود، بنابراین جزئیات مهمی را از دست می دهد که ممکن است بر نحوه درک کاربر از تصویر تأثیر بگذارد.

مثال زیر را در نظر بگیرید که در آن به تصویر یک ارتفاع ثابت داده شده است:

.card__thumb {
    height: 220px;
}

اگر ظرف کارت بیش از حد گسترده باشد ، منجر به چیزی می شود که ما در سمت راست می بینیم (تصویری که بسیار گسترده است). دلیلش این است که ما نسبت تصویر را مشخص نمی کنیم.

تنها یکی از دو راه حل برای این وجود دارد. اولین مورد استفاده از هک padding برای ایجاد یک نسبت ذاتی

.card__thumb {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}

.card__thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

راه حل دوم استفاده از جدید است aspect-ratio ویژگی CSS. با استفاده از آن می توانیم کارهای زیر را انجام دهیم:

.card__thumb img {
    aspect-ratio: 4 / 3;
}

توجه داشته باشید: قبلاً در مورد آن نوشته ام aspect-ratio در صورتی که بخواهید در مورد آن اطلاعات کسب کنید:بیایید با نسبت ابعاد در CSS آشنا شویم“.

از موارد و مثال ها استفاده کنید

آواتارهای کاربر

یک مورد استفاده کامل برای object-fit: cover آواتارهای کاربر است. نسبت ابعاد مجاز برای یک نماد اغلب مربع است. قرار دادن یک تصویر در یک ظرف مربعی می تواند تصویر را مخدوش کند.

.c-avatar {
    object-fit: cover;
}

لیست آرم ها

فهرست کردن مشتریان یک کسب و کار مهم است. ما اغلب از لوگوها برای این منظور استفاده می کنیم. از آنجایی که لوگوها اندازه های متفاوتی خواهند داشت، ما به روشی برای تغییر اندازه آنها بدون تحریف آنها نیاز داریم.

خوشبختانه، object-fit: contain راه حل خوبی برای آن است

.logo__img {
    width: 150px;
    height: 80px;
    object-fit: contain;
}

تصویر بند انگشتی مقاله

این یک مورد استفاده بسیار رایج است. ظرف یک تصویر کوچک مقاله ممکن است همیشه تصویری با نسبت ابعاد یکسان نداشته باشد. این مشکل در وهله اول باید توسط سیستم مدیریت محتوا (CMS) برطرف شود، اما همیشه اینطور نیست.

.article__thumb {
    object-fit: cover;
}

پس زمینه قهرمان

در این مورد استفاده، تصمیم گیری در مورد استفاده از an img عنصر یا پس زمینه CSS به موارد زیر بستگی دارد:

• آیا تصویر مهم است؟ اگر CSS به دلایلی غیرفعال باشد ، آیا می خواهیم کاربر تصویر را ببیند؟
• یا هدف تصویر صرفاً تزئینی است؟

بر اساس پاسخ ما ، می توانیم تصمیم بگیریم از کدام ویژگی استفاده کنیم. اگر تصویر هست مهم:

<section class="hero">
    <img class="hero__thumb" src="https://smashingmagazine.com/2021/10/object-fit-background-size-css/thumb.jpg" alt="" />
</section>

.hero {
    position: relative;
}

.hero__thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    
}

اگر تصویر است تزئینی، می توانیم با آن برویم background-image:

.hero {
    position: relative;
    background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("https://smashingmagazine.com/2021/10/object-fit-background-size-css/thumb.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

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

افزودن پس زمینه به تصویر با object-fit: contain

آیا می دانستید که می توانید رنگ پس زمینه را به آن اضافه کنید img? هنگام استفاده نیز از آن بهره مند خواهیم شد object-fit: containبه

در مثال زیر یک شبکه از تصاویر داریم. وقتی نسبت های تصویر و ظرف متفاوت است، رنگ پس زمینه ظاهر می شود.

img {
    object-fit: contain;
    background-color: #def4fd;
}

عنصر ویدیو

آیا تا به حال به یک نیاز داشته اید video به عنوان پس زمینه؟ اگر چنین است ، احتمالاً می خواهید آن عرض و ارتفاع کامل والد خود را به خود اختصاص دهد.

.hero {
    position: relative;
    background-color: #def4fd;
}

.hero__video {
    position: aboslute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

برای اینکه عرض و ارتفاع والد خود را به طور کامل پوشش دهیم، باید پیش فرض را لغو کنیم object-fit ارزش:

.hero__video {
    /* other styles */
    object-fit: cover;
}

نتیجه

همانطور که دیدیم، هر دو object-fit و background-size برای مدیریت نسبت های مختلف تصویر بسیار مفید هستند. ما همیشه روی تنظیم ابعاد عالی برای هر تصویر کنترلی نخواهیم داشت و اینجاست که این دو ویژگی CSS می درخشند.

یادآوری دوستانه در مورد پیامدهای دسترسی انتخاب بین یک img عنصر و پس‌زمینه CSS: اگر تصویر صرفاً تزئینی است، پس‌زمینه CSS را انتخاب کنید. در غیر این صورت، یک img مناسب تر است.

امیدوارم این مقاله برای شما مفید بوده باشد. ممنون که خواندید.