نحوه کاهش تصویر در Html

فهرست مطالب:

نحوه کاهش تصویر در Html
نحوه کاهش تصویر در Html

تصویری: نحوه کاهش تصویر در Html

تصویری: نحوه کاهش تصویر در Html
تصویری: آموزش html و css جلسه ۸ وارد کردن تصاویر در صفحات HTML 2024, آوریل
Anonim

در زبان نشانه گذاری ابرمتن (HTML) ، از دستور ویژه "tag" برای نمایش یک تصویر در یک صفحه استفاده می شود. از این برچسب به عنوان img یاد می شود و شامل مجموعه ای از متغیرها - "ویژگی ها" است. با کمک ویژگی ها ، می توانید تمام جنبه های نمایش تصویر در یک صفحه ابر متن ، از جمله ابعاد آن را تعیین کنید. با این حال ، این تنها راه حل مشکل نیست - شما همچنین می توانید با استفاده از Cascading Style Sheets (CSS) اندازه تصویر را کاهش دهید.

نحوه کاهش تصویر در html
نحوه کاهش تصویر در html

دستورالعمل ها

مرحله 1

ویژگی های ارتفاع و عرض را در برچسب مسئول نمایش تصویر مورد نظر قرار دهید. اولی را به اندازه عمودی عکس ، و دومی را به صورت افقی تنظیم کنید. هر دو عدد را بر حسب پیکسل تنظیم کنید ، اما نیازی به نشان دادن واحدها - px - در اینجا نیست. هنگام محاسبه مقادیر لازم برای این ویژگی ها ، به رعایت نسبت های کاهش تصویر توجه کنید ، در غیر این صورت به صورت مخدوش نمایش داده می شود. به عنوان مثال ، برای قرار دادن یک تصویر نصف از پرونده ای به نام SomePic.

گام 2

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

مرحله 3

اگر می خواهید اندازه تصویر را با استفاده از توصیف سبک ها مشخص کنید ، از همان نام برچسب - img - و ویژگی ها - عرض و ارتفاع استفاده کنید. در این حالت ، واحدهای اندازه گیری - px ، pt یا٪ - باید همیشه مشخص شوند. برای تنظیم به نصف رساندن اندازه تصاویر کاملاً موجود در صفحه ، ورودی زیر را در بلوک توضیحات سبک قرار دهید: img {height: 50٪؛} اگر می خواهید اندازه فقط یک تصویر را کاهش دهید ، یک ویژگی شناسه اضافی اضافه کنید به برچسب خود اختصاص دهید و یک ویژگی منحصر به فرد برای تصاویر این صفحه اختصاص دهید - برای مثال ، PicOne: همان مقدار را به رکورد سبک اضافه کنید و آن را با "هش" # از نام برچسب جدا کنید. توضیحات کامل سبک در این حالت ممکن است به این شکل باشد: img # OnePic {height: 50٪؛}

توصیه شده: