تنظیمات عکس و ویدیو در طراحی واکنش گرا

تنظیمات عکس و ویدیو در طراحی واکنش گرا

 

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

تنظیم کردن فیلم و عکس در طراحی واکنش گرا
 

به همین دلیل تنظیمات ویدیو را از width به max-width تغییر میدهیم.

video{

      max-width: 100%;

      height: auto;

}

 

حال کیفیت بهتر شد.

تنظیمات عکس در طراحی واکنش گرا
 

 

تنظیمات ویدیو در طراحی واکنش گرا
 

تنظیمات عکس:

میتوانید دستور بدهید که اگر طول صفحه از ۷۶۸  گذشت، تصویر تغییر کرده و به تصویر دیگری تغییر کند.

 

<picture>

                  <source srcset="3.jpg" media="(max-width:768px)">

                  <source srcset="6.jpg" type="">

                  <img src="3.jpg" alt="coffee">

            </picture>
تنظیم کردن عکس در طراحی واکنش گرا
 

 

تنظیم کردن ویدیو در طراحی واکنش گرا
 

 

قسمت قبل آموزش (آموزش dual query در طراحی واکنش گرا)

قسمت قبل آموزش (تغییرات بیشتر در طراحی واکنش گرا)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.