حل مشکل اندازه تصاویر با CSS

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

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

مشکلات متعددی در رابطه با تصاویر داخل یک سایت ممکن است وجود داشته باشد که در ادامه به اصلی‌ترین آنها خواهیم پرداخت .

عرض تصویر از عرض صفحه بیشتر است !

از جمله اولیه‌ترین مشکلاتی که طراحان قالب با تصاویر دارند بیشتر بودن عرض تصاویر از عرض صفحه وب است . زمانی که شما یک استایل کلی برای تصاویر داخل سایت درنظر نگرفتید ، تصاویری که عرض آنها بسیار بزرگتر از عرض صفحه شما است ( مثلا عرض صفحه شما 1600 و عرض تصویر شما 1800 پیکسل است ) مسبب این خواهد بود که صفحه شما از حالت افقی سرریز داشته و اصطلاحا overflow داشته باشد .

برای اینکه در قدم اول این مشکل را برای صفحات سایت خودتان و برای تمامی نصاویر حل کنید لازم است تا قطعه کد زیر را در ابتدای فایل Style.css خودتان قرار داده و تمامی تصاویر را در گام اول مدیریت کنید :

img {
	max-width:100%;
}

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

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

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

مشکل دوم ، کج شدن تصاویر از نظر عرض یا ارتفاع ( کش آمدن یا پهن شدن تصویر )

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

.avatar-photo {
	width:50px;
	height:50px;
}

اول از هرچیزی بهتر است تصاویر خود را برای این بخش بصورت مربعی انتخاب کنید چراکه استایل شما در عرض و ارتفاع بصورت یک اندازه است . در اینصورت ممکن است مشکلی نداشته باشید اما اگر تصویر شما بصورت‌های دیگری دارای تناسب عرض و ارتفاع باشد ، مثلا تصاویر مستطیلی ، شما با اعمال استایل بالا به تصاویر ، مشکل خواهید داشت .

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

.style {
	object-fit:cover;
	object-fit:contain;
}

اکنون دو سوال اصلی اینجا وجود دارد ؟

چه زمانی باید از دستور object-fit با مقدار cover استفاده کنیم ؟

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

element.style {
    width: 100%;
    height: 260px;
}

اکنون به خروجی این تصویر با دستور بالا دقت کنید :

دقیقا به تصویر بالا دقت کنید ( به قسمت اسلایدر انواع مودم ) . این حالت برای زمانی است که دستور object-fit با مقدار cover استفاده نشده است و شاهد هستید که تناسب عرض و ارتفاع تصویر برهم خورده و مثل این است که مودم در تصویر له شده است . اما اکنون دستور object-fit با مقدار cover برای این تصویر استفاده می‌کنیم :

element.style {
    object-fit: cover;
    width: 100%;
    height: 260px;
}

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

همانطور که مشاهده می‌کنید به کمک دستور object-fit با مقدار cover ، تصویر بخوبی نمایش داده می‌شود اما کمی از نظر ارتفاعی دچار مشکل است که می‌توانید با افزایش ارتفاع ، این مشکل را نیز حل کنید .

چه زمانی باید از دستور object-fit با مقدار contain استفاده کنیم ؟

اگر موضوع بالا را بخوبی درک کرده باشید ، از حالت cover زمانی استفاده می‌کنیم که قصد داریم تا تصویر تمامی باکس را پوشش داده و بدون برهم خوردن تناسب نمایش داده شود . اما اکنون کاربر دستور contain چیست ؟

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

.product-item figure img {
    height: 350px;
    width:100%;
}

خروجی شما بدین شکل خواهد بود :

همانطور که مشاهده می‌کنید ، تصاویر کیبوردها از لحاظ عمودی دچار کشسانی شده است ، اما اکنون باید کاری کرد تا تصاویر محصولات به درستی نمایش داده شود . برای این کار لازم است تا از کد زیر استفاده کنیم :

.product-item figure img {
    height: 350px;
    width:100%;
    object-fit: contain;
}

پس از اعمال این کد ، خروجی بصورت زیر بهبود پیدا خواهد کرد :

پس مشاهده می‌کنید که تنها با 1 خط کد و بصورت هوشمندانه می‌توان دیزاین قالب را برای نمایش هرنوع تصویری با هر اندازه ، برای همیشه تنظیم کرد .

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

اطلاع از همین چند نکته کافیست تا یک قالب تمیز و جذاب از نظر تصاویر داشته باشید . امیدواریم این محتوا برای شما دوستان و علاقمند به فرانت‌اند مفید بوده باشد . پاینده باشید .