ב-Tailwind, יחס הגובה-רוחב הוא היחס בין רוחב אלמנט לגובה, כמו סרטון או תמונה. Tailwind CSS הציגה תמיכה מקורית עבור כלי עזר ליחס גובה-רוחב, המשתמשים במאפיין CSS יחס גובה-רוחב כדי להגדיר את יחס הגובה-רוחב הרצוי עבור אלמנט. עם זאת, מאפיין זה אינו נתמך בדפדפנים ישנים יותר. לכן, משתמשים יכולים להשתמש בתוסף יחס רוחב-גובה כדי לתמוך בדפדפנים אלה. תוסף זה מציג שתי מחלקות, כלומר, ' היבט-w-{n} ' ו' היבט-h-{n} ', שניתן לשלב כדי לתת לאלמנט יחס רוחב-גובה קבוע.
מאמר זה יסביר את השיטה להגדיר את תוסף יחס הגובה-רוחב ב-Tailwind.
כיצד להגדיר תוסף יחס גובה-רוחב ב-Tailwind CSS?
כדי להגדיר את תוסף יחס הגובה-רוחב ב-Tailwind, עיין בשלבים הבאים:
- התקן את תוסף יחס הגובה-רוחב בפרויקט
- הוסף את תוסף יחס הגובה-רוחב בקובץ 'tailwind.config.js' והשבת את ' אספקט תוסף ליבה
- השתמש בשיעורי הפלאגין ביחס גובה-רוחב בתוכנית HTML
- אמת את הפלט על ידי צפייה בדף האינטרנט HTML
שלב 1: התקן תוסף יחס גובה-רוחב ב-Tailwind Project
ראשית, פתח את הטרמינל והפעל את הפקודה המפורטת להלן כדי להתקין את תוסף יחס הגובה-רוחב בפרויקט:
אסל ו @ רוח גב / יחס גובה-רוחב
שלב 2: הגדר את התוסף של יחס גובה-רוחב בקובץ התצורה של Tailwind
לאחר מכן, פתח את הקובץ 'tailwind.config.js', הוסף בו את הפלאגין יחס רוחב-גובה והשבת את ה-' אספקט תוסף ליבה כדי למנוע התנגשויות:
module.exports = {תוֹכֶן: [ './index.html' ] ,
corePlugins: {
יחס רוחב-גובה: שֶׁקֶר ,
} ,
תוספים: [
לִדרוֹשׁ ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
שלב 3: השתמש בתוסף יחס גובה-רוחב בתוכנית HTML
כעת, צור תוכנית HTML והשתמש בתוסף יחס רוחב-גובה שבו. לדוגמה, השתמשנו ב- ' היבט-w-16 ' ו' היבט-h-9 ' שיעורים בתוכנית שלנו כדי לשמור על יחס רוחב-גובה של 16:9:
< גוּף >< div מעמד = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
גבול המסגרת = '0' להתיר = 'מד תאוצה; הפעלה אוטומטית;
לוח-כתיבה; מדיה מוצפנת; ג'ִירוֹסקוֹפּ;
תמונה בתמונה' הרשה מסך מלא > iframe >
div >
גוּף >
כאן:
- ה ' 'רכיב משתמש בשתי מחלקות תוסף יחס רוחב-גובה, כלומר, ' היבט-w-16 ' ו' היבט-h-9 '. מחלקות אלו משמשות ליצירת מיכל עם יחס רוחב-גובה קבוע של 16:9.
- ה '