画像表示のバリーション
画像の表示について、3つのバリーションをつくった。
画像に背景がないとサイトに画像が溶け込んでしまうことがある。そんなときはデモにある「通常」スタイルを使う。
メインとなる画像はサイトのウィンドウの幅いっぱいに広げて表示したい。そんなときはデモにある「幅いっぱいの高さ指定で断ち切り」スタイルを使う。
画像の中のものをシンプルに見せたいときは、色のついた背景がじゃまになる。そんなときはデモにある「背景なし」スタイルを使う。
body { margin: var(--baseSize); } .figure { margin: var(--sizeXLarge) auto; } .figure__image { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: var(--baseSize); border-radius: 4px; background-color: var(--whiteSmoke); } .figure__image--skelton { padding: 0; background-color: transparent; text-align: center; } .figure__image--fullwidth { align-items: flex-start; margin: 0 calc(var(--baseSize) * -1); padding: 0; height: calc(100vw * var(--negativeRatio)); border-radius: 0; } @media screen and (min-width: 44rem) { .figure__image--fullwidth { margin: 0 calc(-50% - (var(--halfSize) * 2)); max-height: var(--contentSizeSmall); background-color: var(--whiteSmoke); } } .figure__image__src { max-width: 100%; object-fit: cover; } .figure__image--fullwidth > .figure__image__src { border-radius: 0; }