cman.jp > WEBページ作成TOP > CSSリファレンス > 「ボックス内での画像の表示位置」
WEBページ作成
広告
object-position「画像の表示位置」
object-positionは、画像一部の表示位置を指定する場合などに使用します。IEやEdgegが対応していないため、実際に使用するにはまだ時間が掛かる見込みです。
2017年5月時点でIEやEdgeは対応していませんのでご注意ください。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | しない |
広告
object-positionの指定方法
| 構文 | |
|---|---|
|
object-fit : 位置 上位置; |
|
| プロパティ | 意味 |
| object-position: 左上位置; | 基点から下端までの距離を値で指定 「長さ・大きさの単位」参照（以下も同様） |
| object-position: 左位置 上位置; | 基点から下端までの距離を値で指定 「長さ・大きさの単位」参照（以下も同様） |
|
デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期値」を参照 |
|
object-fit のサンプル
<style type="text/css">
#sample-area div {
width : 310px ;
border : 1px solid #ccc;
margin : 3px;
padding : 5px;
text-align : center;
}
#pos-sample {
width : 120px;
height : 120px;
object-fit : none;
object-position : 50% 50%; /* 下のサンプルで変更される */
}
</style>
<html>
<div id="sample-area">
<div><img src="img1.jpg" id="pos-sample"></div>
</div>
</html>
IEは非対応のため正しく動作しません。
| 幅変更 | ||
|---|---|---|
| 高さ変更 |
元の画像
2017年5月時点でIEやEdgeは対応していませんのでご注意ください。
ページTOP| 関連するCSS(STYLE) | |
|---|---|
| object-fit | ボックスに合わせた画像サイズの調節 |
広告