CSSのobject-fitプロパティで画像や動画をコンテナに合わせてサイズ調整する方法
CSSの object-fit プロパティを使うと、<img> タグや <video> タグで表示するコンテンツを、親コンテナのサイズに合わせて美しくフィットさせることができます。アスペクト比（縦横比）を維持したまま拡大・縮小したり、余白や切り抜きを制御したりできるため、レスポンシブデザインにおいて非常に便利なプロパティです。
object-fitの主な値
object-fit プロパティには、以下のような値を指定できます。
- fill（初期値）：コンテナ全体に引き伸ばして表示します。元の比率が崩れる場合があります。
- contain：アスペクト比を維持したまま、コンテナ内に収まるように表示します。余白が生じることがあります。
- cover：アスペクト比を維持したまま、コンテナ全体を埋め尽くすように表示します。はみ出した部分は切り取られます。
- none：元のサイズのまま表示します。
- scale-down：
noneとcontainのうち、より小さく表示される方を採用します。
実装例
以下のコードでは、幅250px・高さ350pxのコンテナに対して、object-fit: fill; を指定して画像をフィットさせています。実際にブラウザで実行して動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width: 250px;
height: 350px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>SWIFT</h2>
<img class="myimg" src="https://www.tutorialspoint.com/assets/videos/courses/67/images/course_67_image.png"
alt="Python Data Science" width="300" height="200">
</body>
</html>ポイントと補足
上記の例のように fill を指定すると、画像はコンテナのサイズに強制的に引き伸ばされます。そのため、元画像とコンテナの縦横比が異なる場合は、画像が歪んで見えることがあります。歪みを避けたい場合は、contain や cover を使うのがおすすめです。
また、cover を使用した際に画像のどの部分を表示するかを調整したい場合は、object-position プロパティを組み合わせると、表示位置を上下左右に細かくコントロールできます。
object-fit は主要なモダンブラウザすべてでサポートされているため、安心して本番環境でも利用できます。
-
CSS Flexboxで要素をコンテナの下部に配置する方法
Flexboxで要素を下部に配置する基本の考え方 CSS Flexbox(フレックスボックス)を使えば、positionなどの位置指定プロパティに頼らなくても、要素をコンテナの下部に簡単に配置できます。鍵となるのはmargin-top: auto;という指定です。 フレックスアイテムに自動マージン(autoマージン)を設定すると、コンテナ内の余った空きスペースがすべてそのマージンに吸収されます。その結果、要素は主軸方向の末端へ押し込まれます。flex-direction: column;の場合、これはコンテナの最下部を意味します。 構文 flexプロパティの基本的な構文は次のとおりです。 S
-
CSSのobject-fitとobject-positionを使って画像を切り抜く方法
CSSのobject-fitプロパティとobject-positionプロパティを組み合わせることで、要素内に表示する画像を切り抜いたり、表示位置を細かく調整したりできます。レスポンシブデザインにおいて、画像のアスペクト比を保ちながらレイアウトに収めたい場合に非常に便利な機能です。 基本構文 CSSのobject-fitプロパティおよびobject-positionプロパティの構文は以下の通りです。 Selector { object-fit: /*値*/; object-position: /*値*/; } object-fitの主な値 cover: アスペクト比を維持した