جهت هنری

Katie Hempenius

این نسخه ی نمایشی را امتحان کنید

• برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
• برنامه را با استفاده از اندازه های مختلف مرورگر بارگیری مجدد کنید. توجه کنید که تصاویر چقدر متفاوت هستند: آنها نه تنها اندازه‌های متفاوتی دارند، بلکه برش‌ها و نسبت‌های تصویر متفاوتی نیز دارند.

اینجا چه خبر است؟

جهت هنری تصاویر مختلفی را در اندازه های مختلف نمایش نشان می دهد.

یک تصویر واکنشگرا اندازه های مختلف یک تصویر را بارگیری می کند. Art direction این را یک گام فراتر می برد و بسته به نمایشگر، تصاویر کاملاً متفاوتی را بارگذاری می کند.

از جهت هنری برای بهبود ارائه بصری استفاده کنید. به عنوان مثال، برش های مختلف تصویر در این دمو تضمین می کند که نقطه مورد نظر (گل) بدون توجه به نمایشگر، همیشه با جزئیات نشان داده می شود. مزایای جهت هنری صرفاً زیبایی شناختی است. هیچ مزیت عملکردی نسبت به تصاویر واکنش گرا ارائه نمی دهد.

کد را مشاهده کنید

• برای دیدن کد جهت هنری برای این دمو، index.html را مشاهده کنید.

نحوه کار کد

جهت هنری از تگ های <picture> ، <source> و <img> استفاده می کند.

تصویر

تگ <picture> یک پوشش برای صفر یا چند تگ <source> و یک تگ <image> فراهم می کند.

منبع

تگ <source> یک منبع رسانه را مشخص می کند.

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

img

تگ <img> باعث می شود این کد روی مرورگرهایی کار کند که از تگ <picture> پشتیبانی نمی کنند.

اگر مرورگر از تگ <picture> پشتیبانی نکند، تصویر مشخص شده توسط تگ <img> را بارگیری می کند.