این نسخه ی نمایشی را امتحان کنید
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
. - برنامه را با استفاده از اندازه های مختلف مرورگر بارگیری مجدد کنید. توجه کنید که تصاویر چقدر متفاوت هستند: آنها نه تنها اندازه‌های متفاوتی دارند، بلکه برش‌ها و نسبت‌های تصویر متفاوتی نیز دارند.
اینجا چه خبره؟
جهت هنری تصاویر مختلفی را در اندازه های مختلف نمایش نشان می دهد.
یک تصویر واکنشگرا اندازه های مختلف یک تصویر را بارگیری می کند. Art direction این را یک گام فراتر می برد و بسته به نمایشگر، تصاویر کاملاً متفاوتی را بارگذاری می کند.
از جهت هنری برای بهبود ارائه بصری استفاده کنید. به عنوان مثال، برش های مختلف تصویر در این نسخه نمایشی تضمین می کند که نقطه مورد نظر (گل) بدون توجه به نمایشگر، همیشه با جزئیات نشان داده می شود. مزایای جهت هنری صرفاً زیبایی شناختی است. هیچ مزیت عملکردی نسبت به تصاویر واکنش گرا ارائه نمی دهد.
کد را مشاهده کنید
- برای دیدن کد جهت هنری این نسخه ی نمایشی
index.htmlمشاهده کنید.
نحوه کار کد
جهت هنری از تگ‌های <picture> ، <source> و <img> استفاده می‌کند.
تصویر
تگ <picture> یک پوشش برای صفر یا چند تگ <source> و یک تگ <image> فراهم می کند.
منبع
تگ <source> یک منبع رسانه را مشخص می کند.
مرورگر از اولین تگ <source> با یک درخواست رسانه ای استفاده می کند که true را برمی گرداند. اگر هیچ یک از پرسش های رسانه مطابقت نداشته باشد، مرورگر به بارگیری تصویر مشخص شده توسط <img> بازمی گردد. برچسب زدن
img
تگ <img> باعث می شود این کد روی مرورگرهایی کار کند که از تگ <picture> پشتیبانی نمی کنند.
اگر مرورگر از تگ <picture> پشتیبانی نکند، تصویر مشخص شده توسط تگ <img> را بارگیری می کند.