CSSのobject-fitプロパティとは？主な値と使い方を実例付きで解説
CSSのobject-fitプロパティは、<img>や<video>などの置換要素（コンテンツ）を、指定されたコンテナにどのように収めるかを制御するためのプロパティです。画像や動画のアスペクト比（縦横比）を維持しながら表示したい場合や、逆にコンテナいっぱいに引き伸ばして表示したい場合など、レイアウトの調整に非常に便利です。
object-fitプロパティの主な値
object-fitプロパティには、以下のような値を指定できます。
- contain： コンテンツ全体がコンテナ内に収まるようにスケーリングされます。アスペクト比は維持され、余白が生じる場合があります。
- cover： アスペクト比を維持したままコンテナ全体を埋め尽くすように拡大され、はみ出した部分は切り取られます（クリップされます）。
- fill： デフォルト値です。アスペクト比を無視して、コンテンツボックス全体に引き伸ばして表示します。そのため、画像が歪むことがあります。
- none： リサイズを行わず、元のサイズのまま表示されます。
- scale-down：
noneとcontainのうち、より小さく表示される方が適用されます。
使用例
次のコードは、object-fitプロパティにfillを指定した例です。幅250px・高さ350pxのボックスに対して画像が引き伸ばされて表示されます。
<!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>
このコードでは、元の画像サイズ（300×200）に関わらず、CSSで指定した250×350のボックスに合わせて画像が引き伸ばされます。fillをcoverに変更すれば、画像が歪まずにボックス全体を覆うように表示され、containに変更すれば、画像全体が収まるように縮小表示されます。実際に値を切り替えながら試してみると、それぞれの違いがよく理解できるでしょう。
-
CSSのobject-fitプロパティ徹底解説！5つの値で画像表示を自在にコントロール
CSSのobject-fitプロパティは、要素をコンテナの幅と高さの範囲内に収まるように拡大・縮小するためのプロパティです。開発者がこのプロパティを扱う場面として最も一般的なのが、背景画像やコンテナ内の画像の調整でしょう。object-fitで指定できる5つの値object-fitプロパティには5つの値があります。ここでは画像を例に、それぞれの値の違いをわかりやすく解説します。object-fit: containcontainを指定すると、コンテナに収める要素（この場合は画像）のアスペクト比（縦横比）が維持されます。コンテナとアスペクト比が一致しない場合、余白が生じた側にバー（帯）が表示され
-
CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説
CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>