X/Instagram/YouTube/TikTok/OGPの最新規定画角・セーフゾーン見切れ検証、黄金比(1:1.618)・白銀比(1:1.414)算出、CSSコード自動生成＆A4制作指示書印刷対応。
/* 現代的CSS aspect-ratio プロパティ */
.media-container {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* レガシー対応 パディングハック (YouTube埋め込み等) */
.media-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* (Height / Width) * 100 */
}
.media-wrapper > iframe,
.media-wrapper > img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}