CSS で画像を配置するには、さまざまな方法があります。 オブジェクトの位置 プロパティを使用して、 浮く プロパティ (要素を左また​​は右に揃えるため)。

object-position プロパティを使用する

の オブジェクトの位置 CSS のプロパティは、コンテナ内のコンテンツの配置を指定します。と一緒に使用されます オブジェクトフィット 要素がどのようなものであるかを定義するプロパティ は、コンテンツ ボックス内の x/y 座標で配置されます。

を使用するときは、 オブジェクトフィット プロパティ、デフォルト値 オブジェクトの位置 は 50% 50% したがって、デフォルトでは、すべての画像がコンテンツ ボックスの中央に配置されます。を使用してデフォルトの配置を変更できます。 オブジェクトの位置 財産。

構文

 object-position: | initial | inherit; 

の 位置 の値 オブジェクトの位置 プロパティは、コンテナ内のビデオまたは画像の位置を定義します。 2 つの数値を受け入れます。最初の値は X 軸を制御し、2 番目の値は Y 軸を制御します。次のような文字列を使用できます 左右 、 または 中心 、コンテナ内に画像を配置するためなど。負の値も許可されます。

いくつかの例を使用すると、より明確に理解できます。

例

この例では、次のような文字列値を使用しています。 「右上」、「中央上」、 そして 「左上」 画像を配置します。

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

出力

さて、別の使用例があります。 オブジェクトの位置 財産。

例

この例では、 イニシャル 画像を中央に配置する値。これは、初期値がプロパティをデフォルト値に設定するためです。 50% 50% 。数値も使ってます 200ピクセル そして 100ピクセル 。

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

出力

float プロパティを使用する

CSS の float プロパティは、要素を左また​​は右に押して、他の要素がその要素を囲むようにするために使用される位置決めプロパティです。通常、画像やレイアウトで使用されます。

要素は水平方向にのみ浮動します。したがって、要素を左右にフローティングすることのみが可能であり、上下にはフローティングすることはできません。フローティング要素は、可能な限り左または右に移動できます。簡単に言うと、フローティング要素は左端または右端に表示できることを意味します。

の使用例を見てみましょう 浮く 財産。

例

 CSS float property #left { float: left; } #right { float: right; } 

出力