این درس به نوعی ادامه درس قبلی است که در آن در نظر گرفتیم، اکنون وقت آن است که دانش خود را عمیق تر کنید و ببینید ویژگی های CSSتصاویر.
ابعاد تصویر در CSS
بیایید ببینیم اینجا چه چیز جدیدی است، من یک کلاس img ایجاد کردم که در آن ابعاد تصویر را تنظیم کردم، عرض عرض است و ارتفاع ارتفاع ما است، ابعاد را بیشتر از موارد اصلی نشان دادم تا بتوانید به وضوح ببینید که چگونه تصویر تغییر خواهد کرد.
برای وضوح، مثالی می زنم که در آن متن زیادی وجود دارد، و خواهید دید که چه تورفتگی هایی از تصویر در آن وجود دارد. این مثالما از ویژگی margin استفاده خواهیم کرد که به شما فرصتی برای ارزیابی قابلیت های آن می دهد.
برای وضوح، مثالی می زنم که در آن متن زیادی وجود دارد، و شما خواهید دید که در این مثال چه تورفتگی هایی از تصویر وجود دارد، ما از یک تصویر بدون قرار دادن تورفتگی استفاده می کنیم تا به وضوح تفاوت را ببینید.
در مرورگر موارد زیر را مشاهده می کنیم:
در این مثال، من به لطف پارامتر حاشیه، از هر چهار لبه 20 پیکسلی، تورفتگی هایی از تصویر ایجاد کردم. در اینجا می توانید دستکاری های پیچیده تری انجام دهید، می توانید تورفتگی را از یک لبه خاص تنظیم کنید، به عنوان مثال:
- margin-top - حاشیه از سمت بالا
- margin-right - حاشیه از سمت راست
- حاشیه-پایین - حاشیه از سمت پایین
- margin-left - حاشیه از سمت چپ
بر این اساس، در اینجا می توانید همه چیز را دقیق تر تنظیم کنید، یا تورفتگی را فقط از یک یا دو طرف بدون دست زدن به بقیه تنظیم کنید.
در مرورگر:
فریم را در اطراف تصویر قرار می دهیم، به لطف پارامتر حاشیه، ابتدا عرض کادر را با استفاده از عرض حاشیه تنظیم می کنیم، آن را به پیکسل تنظیم می کنیم، سپس استایل فریم، یعنی ظاهر آن به سبک حاشیه، آنجاست. چندین مقدار برای انتخاب شما وجود دارد:
و آخرین پارامتری که تنظیم می کنیم رنگ حاشیه است که توسط پارامتر border-color تنظیم می شود.
در مرورگر می بینیم:
همانطور که متوجه شدید، ما به لطف انتخابگر برچسب، پس زمینه را به تگ بدنه اختصاص دادیم، از آنجایی که کل سند را اشغال می کند، می توانیم تگ های دیگری را نیز اختصاص دهیم. پارامتر پس‌زمینه، پس‌زمینه را برای ما تصویری ساخت، آدرسی که در پرانتز روی آن می‌نویسیم. شما همچنین می توانید پس زمینه را دستکاری کنید، به عنوان مثال:
پس زمینه: url(proba.png) repeat-x;
پس زمینه فقط در امتداد محور X تکرار می شود، یعنی به صورت افقی در یک خط.
پس زمینه: url(proba.png) repeat-y;
پس زمینه فقط در امتداد محور Y تکرار می شود، یعنی به صورت عمودی در یک خط.
پس زمینه: url(proba.png) no-repeat;
پس زمینه تکرار نمی شود، اما تنها یک تصویر ظاهر می شود.
اندازه پس زمینه: 500px 200px;
آی تی پارامتر اضافی A که اندازه، عرض و ارتفاع پس‌زمینه تصویر را تعیین می‌کند.
شفافیت تصویر با CSS
در مرورگر موارد زیر را مشاهده می کنیم:
این ویژگی با ظهور CSS3 آمد و در واقع مورد استفاده بسیار گسترده قرار گرفت. پیاده سازی شده با استفاده از پارامتر opacity شفافیت تصویر، مقادیر را از 0 تا 1 تنظیم می کند و پارامتر فیلتر دوم: آلفا(Opacity=50)؛ همین کار را برای مرورگر اینترنتکاوشگر زیرا نسخه‌های قدیمی‌تر پارامتر opacity را پشتیبانی نمی‌کنند، مقادیر از 0 تا 100 است. در مثال، من به‌طور ویژه دو تصویر ساختم تا بتوانید تفاوت را به وضوح ببینید.
این درس ویژگی های تصویر CSS را به پایان می رساند، امیدوارم این درس برای شما مفید بوده باشد و الهام بخش شما برای مطالعه بیشتر زبان و کسب دانش جدید باشد.
تاریخ انتشار: 2014-04-22
تصاویر اجزای تقریباً هر سایتی هستند، بنابراین تغییر اندازه ضروری است. 2 راه برای تغییر اندازه تصویر وجود دارد: ویرایشگر گرافیکییا به صورت برنامه ای کد htmlدر css
اگر در کد cssدر html اندازه تصویر را تنظیم نکنید، سپس ارتفاع و عرض آن در سایت مانند پیکسل خواهد بود. منبع فایل. یعنی فقط با استفاده از ویرایشگر گرافیکی می توانید اندازه یک عکس را بدون css و html تغییر دهید و اگر اندازه آن را مشخص نکنید به طور خودکار در سایت تغییر می کند. اما مواردی وجود دارد که شما نیاز به تغییر اندازه یک تصویر در css به html دارید.
1. تغییر تصویر در ویرایشگر گرافیکی
شما می توانید اندازه تصویر را در هر ویرایشگر گرافیکی (فتوشاپ، gimp، xnview) تغییر دهید و به طور خودکار در سایت مطابق با اندازه اصلی تغییر می کند.
مزایای روش:
تصویر سریعتر بارگیری می‌شود زیرا نیازی به دانلود داده‌های اضافی (پیکسل) ندارید، که سپس به صورت برنامه‌ریزی فشرده می‌شوند.
معایب:
ویرایشگرهای گرافیکی تصاویر با عرض و ارتفاع کمتر از 200 پیکسل را ضعیف فشرده می کنند.
در صورت امکان و مناسب، سعی کنید اندازه آن را در یک ویرایشگر گرافیکی تغییر دهید تا تصاویر سریعتر از تغییر اندازه برنامه ای بارگذاری شوند. اختلاف سرعت می تواند ده ها برابر باشد.
2. تغییر تصویر در کد css در سایت
طرفداران:
برای تنظیم اندازه سریعتر و راحت تر. این روشکاهش تصویر معمولا برای راحتی استفاده می شود. به عنوان مثال، زمانی که یک عکس می‌تواند اندازه‌های مختلفی داشته باشد، اغلب راحت‌تر است که مقادیر یک عکس را به صورت برنامه‌ریزی تغییر دهید تا اینکه همه گزینه‌های قالب یک تصویر ویرایش شده در یک ویرایشگر گرافیکی را آپلود کنید.
بر خلاف ویرایشگرهای گرافیکی، تصاویر کوچک فشرده شده کیفی، کمتر از 200 پیکسل در ارتفاع یا عرض. اگر می خواهید اندازه تصویر در سایت کوچکتر از 200 پیکسل باشد، بهتر است اندازه اصلی 30-50٪ (260-300 پیکسل) بزرگتر باشد تا ذخیره شود. کیفیت خوبهنگام کاهش
در عین حال تفاوت سرعت بارگذاری سایت احساس نخواهد شد، زیرا تصاویر کوچک فضای بسیار کمی را اشغال می کنند و اگر اندازه آنها را 30 درصد افزایش دهید، هیچ تغییری مشاهده نمی کنید. اما به تفاوت کیفیت توجه کنید.
معایب:
بارگذاری تصاویر فشرده‌شده به‌صورت برنامه‌ای بیشتر طول می‌کشد زیرا تغییر اندازه تنها پس از دانلود نسخه اصلی اتفاق می‌افتد. بنابراین، اگر اندازه تصویر بیش از 200 پیکسل در عرض یا ارتفاع است، بهتر است آن را در یک ویرایشگر گرافیکی فشرده کنید تا سایت سریعتر کار کند.
نحوه تغییر اندازه تصویر html با استفاده از css
برای تغییر اندازه یک تصویر در html cssخواص استفاده می شود عرض (عرض) و ارتفاع (ارتفاع)داخل ویژگی style شما می توانید فقط عرض یا ارتفاع بنویسید و مقدار نامشخص باقی مانده به طور خودکار با حفظ نسبت تصویر تغییر می کند. به عنوان مثال، با تعیین تنها عرض یک تصویر با استفاده از عرض، ارتفاع آن به طور خودکار تغییر می کند و نسبت تصویر را حفظ می کند. و بالعکس، زمانی که فقط ارتفاع (ارتفاع) را مشخص می کنید، عرض آن نیز به طور خودکار تغییر می کند و نسبت تصویر را حفظ می کند.
مثال کد بدون مشخص کردن ابعاد تصویر
نتیجه در مرورگر
کد صفحه
کد مثال با تغییر اندازه تصویر در css
نتیجه در مرورگر
کد صفحه
style="width:150px; ">
هر دو نمونه بالا از یک تصویر با اندازه 300x184 پیکسل (عرض و ارتفاع) استفاده می کنند. در 1 مثال، تصویر در مرورگر بدون تغییر با اندازه اصلی 300x184 پیکسل نمایش داده شد، زیرا عرض و ارتفاع در css مشخص نشده بود. و در مثال دوم، تصویر در مرورگر 2 برابر کاهش یافته است، از آنجایی که عرض 150 پیکسل مشخص شده است، بر این اساس ارتفاع به طور خودکار به 92 پیکسل تغییر می کند. همانطور که می بینید، ویژگی height ممکن است اصلاً مشخص نباشد، زیرا به طور خودکار متناسب با عرض تغییر می کند.
اگر هر دو گزینه را ارائه دهید: عرض (عرض)، ارتفاع (ارتفاع)و آنها با نسبت مطابقت نخواهند داشت، سپس تصویر دقیقاً همان اندازه را خواهد داشت، اما بسته به مقادیر، به صورت فشرده یا کشیده شده است.
چرا بزرگ کردن تصاویر نامطلوب است
مهم: افزایش اندازه تصویر با افت کیفیت همراه است. هنگام تغییر به هر طریق، مهم است که مقادیر را کمتر از تصویر اصلی تنظیم کنید، یعنی فقط کاهش دهید.
اگر اندازه پیکسل را بزرگتر از تصویر اصلی تنظیم کنید، کیفیت آن کاهش می یابد. و کاهش کیفیت به وضوح قابل مشاهده خواهد بود، زیرا رایانه نمی تواند پیکسل های جدیدی اضافه کند، فقط می تواند اندازه پیکسل های موجود را افزایش دهد. هرچه بزرگ‌نمایی تصویر از مقدار اصلی بیشتر باشد، کیفیت آن بدتر و پیکسل‌های مربع واضح‌تر دیده می‌شود.
برای تغییر اندازه یک عکس با استفاده از HTML برای یک برچسب ویژگی های عرض (عرض) و ارتفاع (ارتفاع) ارائه شده است. پیکسل ها به عنوان مقدار استفاده می شوند و آرگومان ها باید با ابعاد فیزیکی تصویر مطابقت داشته باشند. به عنوان مثال، در شکل. 10.6 تصویری با ابعاد 100x111 پیکسل را نشان می دهد.
برنج. 10.6. عکس سایز اصلی
بر این اساس، کد HTML برای قرار دادن این شکل در مثال 10.4 نشان داده شده است.
مثال 10.4. ابعاد ترسیم
اگر ابعاد تصویر به صراحت مشخص شده باشد، مرورگر از آنها برای نمایش ناحیه خالی مربوط به تصویر در حین بارگذاری سند استفاده می کند (شکل 10.7). در غیر این صورت، مرورگر قبل از تغییر عرض و ارتفاع تصویر منتظر می ماند تا تصویر به طور کامل بارگذاری شود (شکل 10.8). در این حالت، ممکن است قالب بندی مجدد متن رخ دهد، زیرا در ابتدا اندازه تصویر مشخص نیست و به طور خودکار روی کوچک تنظیم می شود.
برنج. 10.7. اندازه تصویر مشخص نشده و هنوز بارگذاری نشده است
برنج. 10.8. تصویر آپلود شد، متن دوباره قالب بندی شد
عرض و ارتفاع تصویر را می توان هم به بالا و هم پایین تغییر داد. با این حال، این به هیچ وجه بر سرعت دانلود تصویر تأثیر نمی گذارد، زیرا اندازه فایل بدون تغییر باقی می ماند. بنابراین، تصویر را با احتیاط کاهش دهید، زیرا. این ممکن است باعث سردرگمی خوانندگان شود که چرا بارگذاری چنین طرح کوچکی طول می کشد. اما افزایش اندازه منجر به اثر معکوس می شود - اندازه تصویر بزرگ است، اما فایل نسبت به تصویر با همان اندازه سریعتر بارگذاری می شود.
روی انجیر 10.9 همان تصویری را نشان می دهد که در شکل نشان داده شده است. 10.6، اما عرض و ارتفاع آن دو برابر شد.
برنج. 10.9. نمایش تصویر بزرگ شده در مرورگر
کد چنین نقاشی تقریباً بدون تغییر باقی می ماند و در مثال 10.5 نشان داده شده است.
مثال 10.5. تغییر اندازه یک عکس
چنین تغییر اندازه، نمونه‌گیری مجدد نامیده می‌شود و الگوریتم مرورگر در توانایی‌های خود نسبت به ویرایشگرهای گرافیکی پایین‌تر است. بنابراین تنها در موارد خاص باید تصویر را از این طریق افزایش داد وگرنه کیفیت تصویر بیش از حد بد می شود. بهتر است از نوعی برنامه گرافیکی استفاده کنید. استثنا طرح هایی است که شامل مناطق مستطیلی است. روی انجیر شکل 10.10 یک فایل الگو را نشان می دهد که 54 بایت طول می کشد و دارای اندازه اصلی 8 در 8 پیکسل است که تا 150 پیکسل مقیاس شده است.
برنج. 10.10. تصویر بزرگ شده
مرورگرها از دو الگوریتم برای نمونه‌گیری مجدد استفاده می‌کنند - دو مکعبی (لبه‌های صاف و طیف رنگی صافی می‌دهد) و نزدیکترین نقاط (حفظ مجموعه اصلی رنگ‌ها و لبه‌های تیز). نسخه های اخیر مرورگرها از الگوریتم دو مکعبی استفاده می کنند، در حالی که مرورگرهای قدیمی، برعکس، از الگوریتم نزدیکترین نقطه استفاده می کنند.
دستورالعمل
ابتدا سعی کنید تصویر را با استفاده از موتورهای جستجو پیدا کنید. درخواستی را وارد کنید و سپس برگه تنظیمات جستجو را انتخاب کنید. به عنوان مثال، گوگل یک دکمه "ابزار جستجو" دارد، در حالی که Yandex دارای یک نماد با لغزنده است. پس از اینکه باید مورد "Size" را انتخاب کنید و مقادیر دقیق را مشخص کنید. یا مثلاً اگر به عکسی با وضوح خوب نیاز دارید، «Large» را انتخاب کنید.
اگر عکسی با اندازه دلخواه وجود نداشت، می توانید آن را خودتان روی قاب تنظیم کنید. راه هایی وجود دارد. اولین مورد این است که ابتدا یک سند با اندازه دلخواه ایجاد کنید و سپس تصویر را تغییر دهید. مورد دوم برعکس است - تصویر را باز کنید و اندازه را تغییر دهید. اساساً هیچ تفاوتی وجود ندارد: همه چیز به ترجیحات و اهداف شما بستگی دارد. نمونه ها در Adobe Photoshop در نظر گرفته می شوند، اما می توانید از ویرایشگرهای گرافیکی دیگر استفاده کنید.
راه اول روی "File" - "Create ..." یا کلید ترکیبی Ctrl + N کلیک کنید. پنجره ای با تنظیمات در مقابل شما ظاهر می شود. پارامترهای عرض، ارتفاع و وضوح رنگ مورد نیاز را در آنجا مشخص کنید. سپس تصویری را که دوست دارید در مرورگر باز کنید، کلیک راست کرده و "Copy Image" را انتخاب کنید. سپس به برنامه برگردید و ترکیب Ctrl + V را فشار دهید.
تصویر در پنجره ویرایشگر گرافیک ظاهر می شود. سپس روی "Editing" - "Free Transform" یا ترکیبی Ctrl + T کلیک کنید. نکات کلیدی ظاهر می شوند که با کمک آنها می توانید تصویر را به اندازه پنجره کار متناسب کنید. به محض دریافت نتیجه مورد نظر (به هر حال، می توانید از مرزهای منطقه کاری فراتر بروید)، روی "فایل" - "ذخیره به عنوان ..." یا ترکیب کلید Ctrl + S کلیک کنید.
راه دوم. ابتدا باید به رایانه بروید، سپس روی "File" - "Open ..." (یا ترکیب Ctrl + O) کلیک کنید و تصویر مورد نظر را انتخاب کنید. سپس "Image" - "Image Size ..." را انتخاب کنید یا Alt + Ctrl + I را فشار دهید. تیک "Keep Aspect ratio" را بردارید و اندازه دلخواه را انتخاب کنید. سپس کلید OK را فشار دهید.
اندازه عکس با توجه به استانداردهای چاپ کاغذ به اندازه مشخص شده در سانتی متر (میلی متر، اینچ) و همچنین به اندازه مشخص شده در DPI تغییر می کند. ابعاد سانتی متر، میلی متر و اینچ را می توان با دقت هزارم مشخص کرد، به عنوان مثال به جای فرمت 15x10 می توانید 15.201x10.203 سانتی متر را تعیین کنید.
میز با اندازه های استاندارد عکس در موقعیت عمودی (پرتره):
| فرمت عکس بر حسب سانتی متر (سانتی متر) | اندازه بر حسب میلی متر (میلی متر) | اندازه بر حسب پیکسل (برای چاپ 300dpi) |
نسبت تصویر (در جهت افقی) |
| 3x4 (پس از برش دستی) | 30x40 | 354x472 | 4:3 (1.33) |
| 3.5x4.5 (پس از برش دستی) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10*15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15*20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20*30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
اندازه ورق کاغذ استاندارد فرمت A4- 21x29.7 سانتی متر یا 2480x3508 پیکسل در 300 نقطه در اینچ. ابعاد دیگر فرمت‌های برگه را می‌توان در صفحه ویکی‌پدیا مشاهده کرد، اما فراموش نکنید که ابعاد در آنجا بر حسب میلی‌متر و اینچ ذکر شده است، یعنی. در تنظیمات این صفحه، باید مقدار مناسب را انتخاب کنید.
اگر نیاز به تغییر اندازه عکس بدون در نظر گرفتن DPI (نقاط در اینچ) دارید، یعنی فقط با رعایت نسبت فرمت مشخص شده، باید پارامتر "Size in DPI" را در تنظیمات روی "0" تنظیم کنید.
تصویر اصلی به هیچ وجه تغییر نکرده است. تصویر پردازش شده دیگری به شما داده می شود.