تنظیمات عکس و ویدیو در طراحی واکنش گرا
در پروژه ای که پیش رو داریم، با بزرگتر شدن صفحه، به دلیل بی کیفیت بودن ویدیو، ویدیو به درستی نشان داده نمیشود.
به همین دلیل تنظیمات ویدیو را از 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>