٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

طراحی وب پاسخگو – فیلم ها

با استفاده از ویژگی عرض اگر widthویژگی روی 100٪ تنظیم شود ، پخش کننده ویدیو پاسخگو خواهد بود و مقیاس بالا و پایین می رود: مثال video { width: 100%; height: auto; } توجه داشته باشید که در مثال بالا ،…

محمد یوسفی

16 جولای 2021

با استفاده از ویژگی عرض

اگر widthویژگی روی 100٪ تنظیم شود ، پخش کننده ویدیو پاسخگو خواهد بود و مقیاس بالا و پایین می رود:

مثال

video {
  width: 100%;
  height: auto;
}

توجه داشته باشید که در مثال بالا ، پخش کننده ویدیو می تواند بزرگتر از اندازه اصلی خود باشد. راه حل بهتر ، در بسیاری از موارد ، استفاده از max-widthخاصیت در عوض خواهد بود.


با استفاده از ویژگی حداکثر عرض

اگر max-widthویژگی روی 100٪ تنظیم شود ، در صورت لزوم پخش کننده ویدئو کاهش می یابد ، اما هرگز مقیاس را بزرگتر از اندازه اصلی خود نمی کند:

مثال

video {
  max-width: 100%;
  height: auto;
}

یک فیلم به عنوان مثال صفحه وب اضافه کنید

ما می خواهیم یک ویدیو را در صفحه وب مثال خود اضافه کنیم. اندازه ویدئو تغییر می کند تا همیشه فضای موجود را اشغال کند:

مثال

video {
  width: 100%;
  height: auto;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها