قاب عکس واکنش‌گرا با CSS aspect-ratio

ویژگی aspect-ratio نسبت عرض به ارتفاع یک قاب را هنگام تغییر اندازه حفظ می‌کند.

یک بخش آزمایشی با width:100% و aspect-ratio:16/9 بساز.

داخل آن یک تصویر قرار بده و عرض و ارتفاع تصویر را صددرصد کن.

برای پر شدن قاب بدون کشیدگی، object-fit:cover را روی تصویر بگذار.

اگر بریدن لبه‌ها مناسب نیست، contain را امتحان کن و فضای خالی را بپذیر.

برای کارت مربع می‌توانی نسبت 1/1 و برای عکس معمولی 4/3 را آزمایش کنی.

از تعیین هم‌زمان ارتفاع ثابت غیرضروری پرهیز کن تا نسبت اثر خود را حفظ کند.

نمونه را در عرض‌های 320، 768 و 1200 پیکسل ببین.

مطمئن شو موضوع اصلی تصویر در موبایل از کادر حذف نشده است.

نتیجه درست یعنی قاب در همه عرض‌ها یک نسبت دارد و تصویر کشیده نمی‌شود.

اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.

آموزش‌های مرتبط