امتیاز موضوع:
  • 3 رأی - میانگین امتیازات: 3.67
  • 1
  • 2
  • 3
  • 4
  • 5

آموزش تگ picture در HTML

#1
تگ picture تگی است همانند یک کانتینر ( Container ) یا یک قالب یا یک محفظه برای نگهداری ۱ یا چندین تصویر ( img ) ، که با استفاده از آن میتوان یک یا چندین تصویر / عکس را در حالت های مختلف در یک صفحه وب به نمایش گذاشت.

معمولا بیشترین استفاده از این تگ برای نمایش ۱ یا چندین تصویر / عکس در حالت واکنش گرایی ( ریسپانسیو ) یک صفحه وب می باشد، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر / عکس های مختلفی را مشاهده نماید.

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

لطفا اول بروی دکمه (امتحان کنید) کلیک نمایید سپس در صفحه ای که باز می شود، مرورگر یا خوده آن صفحه را تغییر اندازه دهید تا بتوانید تغییرات را مشاهده نمایید.

در مثال زیر تعریف کردم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (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>
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
ناشناس
پاسخ
 سپاس شده توسط shghyegh ، شـــقآیــق ، βάરãɲ
آگهی


[-]
به اشتراک گذاری/بوکمارک (نمایش همه)
google Facebook cloob Twitter
برای ارسال نظر وارد حساب کاربری خود شوید یا ثبت نام کنید
شما جهت ارسال نظر در مطلب نیازمند عضویت در این انجمن هستید
ایجاد حساب کاربری
ساخت یک حساب کاربری شخصی در انجمن ما. این کار بسیار آسان است!
یا
ورود
از قبل حساب کاربری دارید? از اینجا وارد شوید.

موضوعات مرتبط با این موضوع...
  آموزش کار با Dreamfora
  آموزش ساخت آیدی در اسکایپ
  آموزش اشتراک V.P.N از طریق هات اسپات گوشی اندروید
  آموزش سئو سایت
  آموزش جامع تولید محتوا در اینستاگرام
  آموزش ساخت اکانت تیک تاک
Thumbsdown آموزش روش خالی کردن Cache گوشى،تلگرام_فعال سازی امضای پیام تلگرام
  آموزش ریست اپل
  آموزش مخفی کردن آخرین بازدید اینستاگرام
  آموزش تگ tr در HTML

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 2 مهمان