تعیین اینکه یک عکس، بزرگ تر از عنصر حاوی خود نمایش داده نشود، با کلاس w3-image ، در W3.CSS
در خیلی از مواقع ما نیاز داریم تعیین کنیم که عکس مورد نظرمان، هرگز بزرگتر از عنصر حاوی خود نمایش داده نشود (یعنی اگر عکس بزرگتر از اندازه عنصر حاوی خود بود، آنگاه کوچکتر از اندازه واقعی خود و به اندازه عنصر حاوی خود، نمایش داده شود) و همچنین آن را بزرگتر از اندازه واقعی خود نیز نبینیم (اگر عنصر حاوی عکس، از اندازه واقعی عکس بزرگتر است، عکس به اندازه واقعی خود نمایش داده شود، نه اندازه عنصر حاوی آن).
برای این منظور می توانیم کلاس w3-image در چارچوب W3.CSS را به کار ببریم.
کلاس w3-image به صورت زیر برای تگ img به کار می رود (تگ img برای نمایش عکس به کار می رود - کلید شماره 507 ) :
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
عرض این صفحه در مرورگر اینترنت خود را کوچکتر کنید تا بتوانید تفاوت بین حالت عادی و هنگام استفاده از کلاس w3-image را مشاهده نمایید :
