جلسه پنجم-تنظیمات عکس و ویدیو در طراحی واکنش گرا

جلسه پنجم-تنظیمات عکس و ویدیو در طراحی واکنش گرا

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

 

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

 

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

 

 

به همین دلیل تنظیمات ویدیو را از 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 در طراحی واکنش گرا)

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

 

 

farkiantech

مطالب مرتبط

دیدگاهها

نظر: