From 7e6441ff570f21d62937045a7366effe282323da Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 00:20:03 +0900 Subject: CSS_Images の各ファイルの .html → .md 変換 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/object-position/index.md | 119 ++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/ja/web/css/object-position/index.md (limited to 'files/ja/web/css/object-position/index.md') diff --git a/files/ja/web/css/object-position/index.md b/files/ja/web/css/object-position/index.md new file mode 100644 index 0000000000..81b998bbc8 --- /dev/null +++ b/files/ja/web/css/object-position/index.md @@ -0,0 +1,119 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - CSS Image + - CSS Property + - Reference +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

+ +

You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ + + +

{{cssinfo}}

+ +

構文

+ +
/* <position> 値 */
+object-position: center top;
+object-position: 100px 50px;
+
+/* グローバル値 */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

+ +
+
<position>
+
要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("<position>")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。
+
+ +
+

注: 要素がボックス外にはみ出る位置も指定できます。

+
+ +

形式文法

+ +{{csssyntax}} + +

+ +

HTML コンテンツ

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+
+ +

CSS コンテンツ

+ +
img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+
+ +

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

+ +

出力

+ +

{{EmbedLiveSample('Example', '100%','300px' )}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}最初期の定義
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("css.properties.object-position")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf