zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9c6b7fd6983e4e623f5265f52472157c668f2642
zhaoguiyang.site/.agents/skills/tailwindcss/references/layout-aspect-ratio.md
zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding 
- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.
2026-03-13 13:18:03 +08:00

770 B
Raw Blame History

name, description
name description
layout-aspect-ratio Controlling element aspect ratio for responsive media

Aspect Ratio

Utilities for controlling the aspect ratio of an element (e.g. video, images).

Usage

<!-- 16:9 video container -->
<div class="aspect-video">
  <iframe src="..."></iframe>
</div>

<!-- 4:3 -->
<div class="aspect-[4/3]">Content</div>

<!-- Square -->
<div class="aspect-square">1:1</div>

<!-- Auto (intrinsic) -->
<div class="aspect-auto">Natural ratio</div>

Key Points

  • aspect-video - 16:9
  • aspect-square - 1:1
  • aspect-auto - browser default (intrinsic)
  • aspect-[4/3] - arbitrary ratio
  • Useful for responsive video embeds and image containers