طراحی سایت فروشگاهی شخصی تجاری در بابل

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

طراحی سایت فروشگاهی شخصی تجاری در بابل

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

طراحی سایت فروشگاهی شخصی تجاری در بابل

بدون شک، برنامه نویسی یکی از مهم‌ترین مهارت‌هایی است که امروزه نه تنها برای فارغ التحصیلان و دانشجویان رشته مهندسی کامپیوتر، بلکه برای سایر رشته‌ها و زمینه‌ها کاربرد مهمی دارد .

تعریف و کاربرد برچسب <picture>در HTML

دوشنبه, ۲۴ دی ۱۳۹۷، ۰۷:۰۰ ق.ظ

برچسب <picture> به توسعه دهندگان وب اجازه می دهد انعطاف پذیری بیشتری در تعیین منابع تصویر داشته باشند.


شایع ترین استفاده از عنصر <picture> برای جهت هنری در طرح های پاسخگو خواهد بود. به جای داشتن یک تصویر که بر اساس عرض عرض نمایش بزرگ می شود، چندین تصویر را می توان طراحی کرد تا به سادگی مرورگر مرورگر را پر کند.


عنصر <picture> دارای دو برچسب مختلف است: یک یا چند برچسب <source> و یک برچسب <img>.


عنصر <source> دارای ویژگی های زیر است:

srcset (مورد نیاز) - نشانی اینترنتی تصویر برای نشان دادن را تعریف می کند

media - هر پرس و جو معتبر رسانه ای که به طور معمول در CSS تعریف می شود را می پذیرد

اندازه - یک توصیفگر عرض واحد، یک پرس و جو رسانه ای تنها با توصیف عرض و یا یک لیست محدود از کاما از پرس و جو رسانه ای با توصیف عرض

type - نوع MIME را تعریف می کند

مرورگر از مقادیر ویژگی برای بارگذاری مناسب ترین تصویر استفاده می کند. مرورگر از اولین <source> عنصر با یک اشاره تطابق استفاده کرده و هر تگ <source> زیر را نادیده می گیرد.


عنصر <img> به عنوان آخرین برچسب فرزند بلوک اعلامیه <picture> مورد نیاز است. عنصر <img> برای ارائه سازگاری به عقب برای مرورگرهایی که عنصر <picture> را پشتیبانی نمی کنند، یا اگر هیچ یک از تگ <source> مطابقت نداشته باشد، استفاده می شود.


عنصر <picture> شبیه عناصر <video> و <audio> است. شما منابع مختلف را تنظیم می کنید و اولین منبع که مطابق ترجیحات می باشد، مورد استفاده قرار می گیرد.


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<body/>
<html/>
تعریف و کاربرد  برچسب picture در HTML


نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی