画像のトリミング

画像のトリミング

• レイアウトの幅・高さに合わせてトリミングする
• マルチデバイス対応時点で、表示する面積に合わせて画像の表示する部分を可変にする場合にも必要な設定

object-fitの指定

• object-fit: cover; でトリミングした結果を表示しますunsplash.com

<p class="cooking"><img src="img/photo.jpg" alt=""></p>

img {
  max-width: 100%;
  vertical-align: bottom;
}
.cooking {
  text-align: center;
}
.cooking > img {
  width: 300px;
  height: 500px;
  object-fit: cover;
}

object-position

• object-position で配置位置を指定できます

.cooking > img {
  width: 300px;
  height: 500px;
  object-fit: cover;
  object-position: left top;
}