یک صفحه HTML بسازید که یک المان div با تصویر پسزمینه داشته باشد و با استفاده از ویژگی CSS background-size کاری کنید تصویر همیشه کل المان را بپوشاند (بدون تغییر نامتناسب نسبت تصویر) و هنگام تغییر اندازه پنجره واکنشگرا بماند.
5.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:43 0.0
برای حل این تمرین از HTML ساده برای قرار دادن یک div و از CSS برای تنظیم تصویر پسزمینه استفاده کنید؛ در CSS از background-image برای تعیین تصویر، background-size: cover برای پوشش کامل المان، background-position: center و background-repeat: no-repeat استفاده کنید تا تصویر مرکزی و بدون تکرار نمایش داده شود. میتوانید مقادیر دیگر مثل contain یا اندازههای دقیق (مثلاً 100% 100% یا 200px 150px) را هم امتحان کنید و با تغییر عرض/ارتفاع یا افزودن media query واکنشگرایی را بررسی نمایید؛ نکتهها: نسبت تصویر حفظ میشود با cover/contain، و از shorthand background نیز برای کد کمتر بهره ببرید.
توسط پژوهشگر در 221 روز قبل ساعت 01:43 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
استفاده از background-size: cover پوشش کامل المان را با حفظ نسبت تصویر فراهم میکند اما ممکن است بخشهایی از تصویر خارج از قاب دیده شوند. برای کنترل مرکزیت دقیقتر از background-position: center center و از background-repeat: no-repeat استفاده کنید تا تصویر تکرار یا جابهجایی نداشته باشد. برای واکنشگرا بودن، اندازهٔ div را با واحدهای نسبی یا نسبت به والد تعیین کنید و در ماژولهای مختلف با media queries اندازه یا نسبت پسزمینه را تنظیم کنید. در صورت نیاز میتوانید گزینههای دیگر مانند contain یا تغییر دقیق اندازه را هم امتحان کنید تا به نتیجهٔ مطلوب برسید.
گزارش