写真の主役が切れたら、表示枠と切り抜き位置を見直そう

横長の写真では器が見えていたのに、縦長のカードへ入れたら端が切れてしまった。画像ファイルが壊れたとは限りません。写真と表示枠の形が違い、枠からはみ出す部分が見えなくなっている可能性があります。

題材は架空の器の展示案内です。横長の写真の右側に一点の器が置かれている場面を想定します。まず紙の枠でも構図を比べ、その後、HTMLとCSSの短い断片で表示方法を考えます。

その写真で、残したいものを一つ決める

作品紹介なら、器の形を見せたいのか、展示室の雰囲気を見せたいのかを先に書きます。同じ写真でも、目的によって切ってよい範囲は違います。今回は器の全体の形を伝えることを優先します。

写真の上に横長と縦長の枠を描いたつもりで、器の口、持ち手、底が枠内へ残るか確認してください。人物が写る例なら、顔の位置だけで判断せず、説明に必要な手元なども対象になります。

この段階で作品全体が入らないなら、切り抜き位置を工夫するだけでは解決しないかもしれません。枠の形を変える、全体表示にする、別の写真を選ぶという選択肢を残しておきます。

全体を収めるか、枠を埋めるかを分ける

CSSのobject-fitは、画像をその表示枠へどう収めるかを指定するものです。contain は縦横比を保って全体を収めるため、枠と写真の比率が違えば余った部分ができます。cover は比率を保って枠を埋めるため、一部が切れることがあります。

この違いはMDNのobject-fitの説明で確認できます。余白がある状態を一律に失敗とせず、作品全体を伝える目的に合うかで選んでください。

今回の失敗例は「カードをそろえるためcoverにし、器の右端が消えた」です。修正案は二つあります。全体の形が必要ならcontainへ替える案、右寄せで全体が残るならcoverの配置を調整する案です。枠をそろえることだけで決めないようにします。

切れる側が決まったら、画像の配置を変える

次はbody内の画像と、それに対応するCSSの断片です。1200×800の写真を vessel.jpg として用意する必要があり、画像は付属しません。数値とaltは実際に使う写真へ合わせてください。

<img class="work-photo" src="vessel.jpg"
     width="1200" height="800"
     alt="右側の台に置かれた、丸い胴と小さな口を持つ器">

.work-photo {
  display: block;
  width: 100%;
  height: 20rem;
  object-fit: cover;
  object-position: right center;
}

この例では高さを決めた枠に画像を表示し、右側を残す配置にしています。枠の横幅は親の幅に従います。元の写真の右側に器があるという模擬設定だから、この位置を選びました。すべての写真へ同じ指定を付けるものではありません。

MDNのobject-positionの説明では、枠内での配置を指定できることと、初期値が中央を表す 50% 50% であることを確認できます。まず中央と右寄せを比べ、必要に応じて別の位置を試します。

位置を変えても入らなければ、枠を見直す

右側を残しても、器が大きすぎれば左端が切れます。その場合はobject-fitをcontainへ替え、余白を含めて全体が見えるか確認します。切り抜き位置の調整は、写真を縮めてすべて収める設定とは違います。

また、画像の縦横を別々に引き伸ばして枠へ合わせる案では、作品の形が変わって見えるおそれがあります。作品紹介で伝える形を守るため、比率を保つ案で比較しましょう。

画像の説明文も見直します。切り抜いた結果、altに書いた特徴が見えなくなっていないか、画像の役割からaltを考える記事と合わせて確認できます。文字で補えば、どんな切り抜きでもよいという意味ではありません。

器の口と底が、広い枠でも狭い枠でも残るか

一枚の写真を選び、広い幅と狭い幅で表示します。中央、残したい側、全体表示の三案を比べ、「口と底が両方見える」など、必要な条件を具体的に書いて選びましょう。どの案でも条件を満たさなければ、枠や写真の変更が次の作業です。

最後に、確認した画面幅と採用理由を記録します。ページ全体の狭い幅での確認は、スマートフォン表示の点検記事へ進めます。CSSで幅に合わせる練習には、レスポンシブCSSの無料レッスンも利用できます。