files/ja/web/css/object-position/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

---
title: object-position
slug: Web/CSS/object-position
tags:
  - CSS
  - CSS Image
  - CSS Property
  - Reference
translation_of: Web/CSS/object-position
---
<div>{{CSSRef}}</div>

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

<p>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.</p>

<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>


<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css">/* &lt;position&gt; 値 */
object-position: center top;
object-position: 100px 50px;

/* グローバル値 */
object-position: inherit;
object-position: initial;
object-position: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

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

<div class="blockIndicator note">
<p><strong>注:</strong> 要素がボックス外にはみ出る位置も指定できます。</p>
</div>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">例</h2>

<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>

<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
</pre>

<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>

<pre class="brush: 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%;
}
</pre>

<p>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.</p>

<h3 id="Output" name="Output">出力</h3>

<p>{{EmbedLiveSample('Example', '100%','300px' )}}</p>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>最初期の定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<div>


<p>{{Compat("css.properties.object-position")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
</ul>