zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
621ac383694a6a6a49e421e0ba9250ce4a7d95ca
zhaoguiyang.site/.agents/skills/tailwindcss/references/layout-object-fit-position.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

2.0 KiB
Raw Blame History

name, description
name description
layout-object-fit-position Controlling how replaced elements (images, video) are resized and positioned within their container

Object Fit & Object Position

Utilities for controlling how replaced elements like <img> and <video> are resized and positioned within their container.

Usage

Object fit

<!-- Cover container, may crop -->
<img class="h-48 w-96 object-cover" src="photo.jpg" />

<!-- Contain within, may letterbox -->
<img class="h-48 w-96 object-contain" src="photo.jpg" />

<!-- Stretch to fill -->
<img class="h-48 w-96 object-fill" src="photo.jpg" />

<!-- Scale down only if needed, else original size -->
<img class="h-48 w-96 object-scale-down" src="photo.jpg" />

<!-- Original size, ignore container -->
<img class="h-48 w-96 object-none" src="photo.jpg" />

Object position

<!-- Named positions -->
<img class="size-24 object-cover object-top-left" src="photo.jpg" />
<img class="size-24 object-cover object-center" src="photo.jpg" />
<img class="size-24 object-cover object-bottom-right" src="photo.jpg" />

<!-- Custom value -->
<img class="object-cover object-[25%_75%]" src="photo.jpg" />
<img class="object-(--my-object)" src="photo.jpg" />

Responsive

<img class="object-contain md:object-cover object-center md:object-top" src="photo.jpg" />

Key Points

  • object-contain - maintain aspect ratio, fit inside container
  • object-cover - maintain aspect ratio, cover container (may crop)
  • object-fill - stretch to fill container
  • object-scale-down - like contain but never upscale
  • object-none - original size, ignore container
  • Position: object-top-left, object-top, object-top-right, object-left, object-center, object-right, object-bottom-left, object-bottom, object-bottom-right
  • Custom: object-[25%_75%], object-(--custom-property)