تعیین اندازه ارتفاع (Height) و عرض (Width) یک عکس (Image)، با مشخصه های height و width ، در CSS
با استفاده از مشخصه های height و width در CSS ، می توانیم اندازه ارتفاع (Height) و عرض (Width) یک عکس را تعیین نماییم.
برای این منظور می توانیم اندازه ارتفاع (Height) یا عرض (Width) عکس را بر حسب پیکسل (Pixel - px) یا درصدی از اندازه ارتفاع یا عرض عنصر سطح بالاتر در صفحه که شامل تگ img نمایش دهنده آن عکس می باشد، بیان کنیم (تگ img برای نمایش یک عکس به کار می رود - کلید شماره 507 ).
حالت auto نیز برای مشخصه های height و width می تواند انتخاب شود یا واحدهای دیگری مثل cm نیز می تواند برای اندازه آنها به کار رود، ولی در این کلید آموزشی، واحد پیکسل (Pixel - px) و بیان بر حسب درصد (%) را شرح خواهیم داد.
به عنوان مثال، فرض کنید که قصد داریم عرض (Width) یک عکس برابر 500 پیکسل و ارتفاع (Height) آن برابر 200 پیکسل باشد، برای این منظور، کدهای CSS زیر را می نویسیم :
یا فرض کنید که قصد داریم عرض (Width) یک عکس برابر 50 درصد عرض عنصر سطح بالاتر آن باشد و همچنین ارتفاع (Height) آن برابر 100 درصد ارتفاع عنصر سطح بالاتر آن باشد، برای این منظور، کدهای CSS زیر را می نویسیم :
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
