عکس را با CSS بدون کشیدگی داخل قاب جا بده

اگر عرض و ارتفاع عکس را جداگانه تحمیل کنی، چهره‌ها و اشیا ممکن است کشیده شوند.

ویژگی object-fit روش قرار گرفتن تصویر داخل قاب را کنترل می‌کند.

برای نمونه یک قاب با عرض کامل و ارتفاع 240px بساز.

روی تصویر width:100%، height:100% و object-fit:cover قرار بده.

حالت cover قاب را پر می‌کند و ممکن است بخشی از لبه‌های عکس بریده شود.

اگر نمایش تمام تصویر مهم‌تر است، object-fit:contain را امتحان کن.

با object-position می‌توان نقطه مهم عکس را به مرکز یا سمت دیگری برد.

نمونه را با عکس افقی، عمودی و مربعی آزمایش کن.

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

این ویژگی روی iframe اثر ندارد؛ آن را برای تصویر یا ویدیو به کار ببر.

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

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