https://codepen.io/hereiscasio/pen/VwZRmwy?editors=1010

Used UI Component ( #1 )

Aspect ratios

UI 圖來源見此

Discussion

<v-responsive :aspect-ratio='5/4'>
    <div class="media__phone"><img :src="URL_IMAGE"></div>
</v-responsive>

Google YoutubeMusic 把網頁中的某部分強制等比例，也就是不管怎麼調整瀏覽器寬度，該部分仍呈現某種比例（ 見上圖 ），此處為 330 : 264 = width : height = 5 : 4 = 5/4，而這個 "強制把某東西的寬高保持在某種比例"，可以透過 Aspect ratios 實現（ 順帶一提，本日範例有稍微做一點點響應式設計 ）

上圖的手機以及手機上方的紅色圖案，其實就是透過在 .media__phone 中置放背景圖，然後把該紅色圖案以 img 標籤漂浮於其上，這種蠻 tricky 的處理手法（ 雖然在這個時代已不 tricky ），你就別想用 Vuetify 達成了，或許硬幹可能做得到，但我想會得不償失（ e.g. 加很多 hack CSS ）都已經到第 29 天，你應該能理解 Vueitfy 不是來幫你做這種事的，當然官方之後要是把此功能加到某元件、開發出一個底層元件專門幫你做這件事（ 以我的過去的通靈經驗，照他們的發展脈絡來看，我是覺得不太可能搞這種東西 . . . ），那是另一回事