تنظیمات عکس و ویدیو در طراحی واکنش گرا
در پروژه ای که پیش رو داریم، با بزرگتر شدن صفحه، به دلیل بی کیفیت بودن ویدیو، ویدیو به درستی نشان داده نمیشود.
![تنظیم کردن فیلم و عکس در طراحی واکنش گرا](https://farkiantech.com//wp-content/uploads/2021/10/boot_5_5.jpg)
به همین دلیل تنظیمات ویدیو را از width به max-width تغییر میدهیم.
video{ max-width: 100%; height: auto; }
حال کیفیت بهتر شد.
![تنظیمات عکس در طراحی واکنش گرا](https://farkiantech.com//wp-content/uploads/2021/10/boot_5_4.jpg)
![تنظیمات ویدیو در طراحی واکنش گرا](https://farkiantech.com//wp-content/uploads/2021/10/boot_5_3.jpg)
تنظیمات عکس:
میتوانید دستور بدهید که اگر طول صفحه از ۷۶۸ گذشت، تصویر تغییر کرده و به تصویر دیگری تغییر کند.
<picture> <source srcset="3.jpg" media="(max-width:768px)"> <source srcset="6.jpg" type=""> <img src="3.jpg" alt="coffee"> </picture>
![تنظیم کردن عکس در طراحی واکنش گرا](https://farkiantech.com//wp-content/uploads/2021/10/boot_5_2.jpg)
![تنظیم کردن ویدیو در طراحی واکنش گرا](https://farkiantech.com//wp-content/uploads/2021/10/boot_5_1.jpg)