بازی آنلاین
آپلود عکس
13-05-2021، 11:26
تگ picture تگی است همانند یک کانتینر ( Container ) یا یک قالب یا یک محفظه برای نگهداری ۱ یا چندین تصویر ( img ) ، که با استفاده از آن میتوان یک یا چندین تصویر / عکس را در حالت های مختلف در یک صفحه وب به نمایش گذاشت.
معمولا بیشترین استفاده از این تگ برای نمایش ۱ یا چندین تصویر / عکس در حالت واکنش گرایی ( ریسپانسیو ) یک صفحه وب می باشد، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر / عکس های مختلفی را مشاهده نماید.
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
لطفا اول بروی دکمه (امتحان کنید) کلیک نمایید سپس در صفحه ای که باز می شود، مرورگر یا خوده آن صفحه را تغییر اندازه دهید تا بتوانید تغییرات را مشاهده نمایید.
در مثال زیر تعریف کردم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (img_1.jpg) را نمایش بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد تصویر (img_2.jpg) را نمایش بده.
معمولا بیشترین استفاده از این تگ برای نمایش ۱ یا چندین تصویر / عکس در حالت واکنش گرایی ( ریسپانسیو ) یک صفحه وب می باشد، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر / عکس های مختلفی را مشاهده نماید.
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
لطفا اول بروی دکمه (امتحان کنید) کلیک نمایید سپس در صفحه ای که باز می شود، مرورگر یا خوده آن صفحه را تغییر اندازه دهید تا بتوانید تغییرات را مشاهده نمایید.
در مثال زیر تعریف کردم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (img_1.jpg) را نمایش بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد تصویر (img_2.jpg) را نمایش بده.
کد:
<body>
<picture>
<source media="(min-width: 650px)" srcset="img_1.jpg">
<source media="(min-width: 465px)" srcset="img_2.jpg">
<img src="img_3.jpg" style="width:auto;">
</picture>
</body>
![[-]](http://www.flashkhor.com/forum/images/collapse.gif "[-]")
