`object-fit` and `object-position` Properties
This article explains the object-fit and object-position properties.
You can learn how to arrange objects like images and videos and how to write them in CSS.
YouTube Video
HTML for Preview
css-object-fit-position.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-object-fit-position.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Object</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Object Fit And Object Position Properties</h2>
20 </header>
21 <article>
22 <h3>object-fit : fill</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26.container-fill img {
27 width: 100%;
28 height: 100%;
29 object-fit: fill;
30}
31</pre>
32 <header><h4>HTML</h4></header>
33<pre>
34<div class="container-fill" style="width: 150px; height: 100px;">
35 <img src="example.jpg" alt="Example Image">
36</div>
37</pre>
38 <header><h4>HTML+CSS</h4></header>
39 <section class="sample-view">
40 <div class="container-fill" style="width: 150px; height: 100px;">
41 <img src="example.jpg" alt="Example Image">
42 </div>
43 </section>
44 </section>
45 </article>
46 <article>
47 <h3>object-fit : contain</h3>
48 <section>
49 <header><h4>CSS</h4></header>
50<pre class="sample">
51.container-contain img {
52 width: 100%;
53 height: 100%;
54 object-fit: contain;
55}
56</pre>
57 <header><h4>HTML</h4></header>
58<pre>
59<div class="container-contain" style="width: 150px; height: 100px;">
60 <img src="example.jpg" alt="Example Image">
61</div>
62</pre>
63 <header><h4>HTML+CSS</h4></header>
64 <section class="sample-view">
65 <div class="container-contain" style="width: 150px; height: 100px;">
66 <img src="example.jpg" alt="Example Image">
67 </div>
68 </section>
69 </section>
70 </article>
71 <article>
72 <h3>object-fit : cover</h3>
73 <section>
74 <header><h4>CSS</h4></header>
75<pre class="sample">
76.container-cover img {
77 width: 100%;
78 height: 100%;
79 object-fit: cover;
80}
81</pre>
82 <header><h4>HTML</h4></header>
83<pre>
84<div class="container-cover" style="width: 150px; height: 100px;">
85 <img src="example.jpg" alt="Example Image">
86</div>
87</pre>
88 <header><h4>HTML+CSS</h4></header>
89 <section class="sample-view">
90 <div class="container-cover" style="width: 150px; height: 100px;">
91 <img src="example.jpg" alt="Example Image">
92 </div>
93 </section>
94 </section>
95 </article>
96 <article>
97 <h3>object-fit : none</h3>
98 <section>
99 <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102 width: 100%;
103 height: 100%;
104 object-fit: none;
105}
106</pre>
107 <header><h4>HTML</h4></header>
108<pre>
109<div class="container-none" style="width: 150px; height: 100px;">
110 <img src="example.jpg" alt="Example Image">
111</div>
112</pre>
113 <header><h4>HTML+CSS</h4></header>
114 <section class="sample-view">
115 <div class="container-none" style="width: 150px; height: 100px;">
116 <img src="example.jpg" alt="Example Image">
117 </div>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>object-fit : scale-down</h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127 width: 100%;
128 height: 100%;
129 object-fit: scale-down;
130}
131</pre>
132 <header><h4>HTML</h4></header>
133<pre>
134<div class="container-scale-down" style="width: 150px; height: 100px;">
135 <img src="example.jpg" alt="Example Image">
136</div>
137</pre>
138 <header><h4>HTML+CSS</h4></header>
139 <section class="sample-view">
140 <div class="container-scale-down" style="width: 150px; height: 100px;">
141 <img src="example.jpg" alt="Example Image">
142 </div>
143 </section>
144 </section>
145 </article>
146 <article>
147 <h3>object-fit : Example(Cover)</h3>
148 <section>
149 <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152 width: 100%;
153 height: 100%;
154 object-fit: cover;
155}
156</pre>
157 <header><h4>HTML</h4></header>
158<pre>
159<div class="container-example-cover" style="width: 150px; height: 100px;">
160 <img src="example.jpg" alt="Example Image">
161</div>
162</pre>
163 <header><h4>HTML+CSS</h4></header>
164 <section class="sample-view">
165 <div class="container-example-cover" style="width: 150px; height: 100px;">
166 <img src="example.jpg" alt="Example Image">
167 </div>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>object-fit : Example(Contain)</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177 width: 100%;
178 height: 100%;
179 object-fit: contain;
180}
181</pre>
182 <header><h4>HTML</h4></header>
183<pre>
184<div class="container-example-contain" style="width: 150px; height: 100px;">
185 <img src="example.jpg" alt="Example Image">
186</div>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <div class="container-example-contain" style="width: 150px; height: 100px;">
191 <img src="example.jpg" alt="Example Image">
192 </div>
193 </section>
194 </section>
195 </article>
196 <article>
197 <h3>object-fit Common Mistake Example</h3>
198 <section>
199 <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202 width: 100px;
203 height: auto;
204 /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208 object-fit: cover;
209}
210</pre>
211 <header><h4>HTML</h4></header>
212<pre>
213<div class="background-image-invalid">
214 <img src="example.jpg" alt="Example Image">
215</div>
216</pre>
217 <header><h4>HTML+CSS</h4></header>
218 <section class="sample-view">
219 <div class="container-invalid">
220 <img src="example.jpg" alt="Example Image">
221 </div>
222 </section>
223 </section>
224 </article>
225 <article>
226 <h3>object-position : one value</h3>
227 <section>
228 <header><h4>object-position: center;</h4></header>
229 <section class="sample-view" style="width: 550px; height: 250px;">
230 <img class="object-position-center" src="example.jpg" alt="Example Image">
231 </section>
232 <header><h4>object-position: left;</h4></header>
233 <section class="sample-view" style="width: 550px; height: 250px;">
234 <img class="object-position-left" src="example.jpg" alt="Example Image">
235 </section>
236 <header><h4>object-position: 70%;</h4></header>
237 <section class="sample-view" style="width: 550px; height: 250px;">
238 <img class="object-position-70" src="example.jpg" alt="Example Image">
239 </section>
240 <header><h4>object-position: 50px;</h4></header>
241 <section class="sample-view" style="width: 550px; height: 250px;">
242 <img class="object-position-50px" src="example.jpg" alt="Example Image">
243 </section>
244 </section>
245 </article>
246 <article>
247 <h3>object-position : two values</h3>
248 <section>
249 <header><h4>object-position: center center</h4></header>
250 <section class="sample-view" style="width: 550px; height: 250px;">
251 <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252 </section>
253 <header><h4>object-position: right top</h4></header>
254 <section class="sample-view" style="width: 550px; height: 250px;">
255 <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256 </section>
257 <header><h4>object-position: 75% 20%</h4></header>
258 <section class="sample-view" style="width: 550px; height: 250px;">
259 <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260 </section>
261 <header><h4>object-position: 50px 25px</h4></header>
262 <section class="sample-view" style="width: 550px; height: 250px;">
263 <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>object-position: four values</h3>
269 <section>
270 <header><h4>object-position: left 10px top 20px</h4></header>
271 <section class="sample-view" style="width: 550px; height: 250px;">
272 <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273 </section>
274 <header><h4>object-position: right 15% bottom 30px</h4></header>
275 <section class="sample-view" style="width: 550px; height: 250px;">
276 <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277 </section>
278 </section>
279 </article>
280 <article>
281 <h3>object-position: mixed values</h3>
282 <section>
283 <header><h4>object-position: right 50%</h4></header>
284 <section class="sample-view" style="width: 550px; height: 250px;">
285 <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286 </section>
287 </section>
288 </article>
289 <article>
290 <h3>object-position and object-fit</h3>
291 <section>
292 <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293 <section class="sample-view" style="width: 550px; height: 250px;">
294 <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295 </section>
296 <header><h4>object-fit: contain; object-position: right;</h4></header>
297 <section class="sample-view" style="width: 550px; height: 250px;">
298 <img class="object-position-right" src="example.jpg" alt="Example Image">
299 </section>
300 </section>
301 </article>
302 </main>
303</body>
304</html>Object Fitting Related
object-fit Property
The CSS object-fit property is primarily used to control how images, videos, and other content fit within their container elements. By using this property, you can flexibly specify how the specified elements are resized and aesthetically positioned. It is very useful for adjusting image or video display by trimming or scaling when they do not fit within the parent element.
object-fit Values
fill (Default Value)
1img {
2 object-fit: fill;
3}fill is the default value, where images or videos are forcibly stretched to fit the width and height of the parent element completely. In this case, the original aspect ratio is ignored, which may cause image distortion.
- It completely fits the size of the parent element.
- Because the aspect ratio is ignored, images or videos may be stretched vertically or horizontally.
contain
1img {
2 object-fit: contain;
3}contain resizes content so that it fits entirely within the parent element while preserving the aspect ratio. It does not exceed the size of the parent element, and there may be padding on either the vertical or horizontal side.
- The entire content is displayed.
- To maintain the original aspect ratio, padding (letterbox or pillarbox effect) may appear.
cover
1img {
2 object-fit: cover;
3}cover resizes the content to completely cover the parent element while maintaining the aspect ratio. Some content may be trimmed to fit the parent element, but the entire element fills the container, so no gaps occur.
- The content completely covers the parent element.
- It may be cropped while maintaining the original aspect ratio.
- Commonly used for background images or hero section images.
none
1img {
2 object-fit: none;
3}none displays images or videos in their original size and aspect ratio. It does not adjust to fit the size of the parent element, and content overflows if necessary.
- The original size of the content is maintained.
- No resizing is done to fit the content into the parent element.
scale-down
1img {
2 object-fit: scale-down;
3}scale-down is a value that combines the behavior of none and contain. If the content fits the parent element, it behaves like none, but if the content is too large, it applies the behavior of contain and is scaled down to fit.
- The content is scaled down if it is larger than the parent element.
- It is displayed at its original size if it is smaller.
Example Usage
Fitting Background Images to Parent Element
For example, to spread an image across the entire screen with responsive design in mind, it is common to use cover. The following code is an example of fitting an image tightly into the parent element, even if it gets cropped.
1<div class="background-image">
2 <img src="example.jpg" alt="Example Image">
3</div>
4
5<style>
6.background-image img {
7 width: 100%;
8 height: 100%;
9 object-fit: cover;
10}
11</style>In this case, the image completely covers the parent element, maintaining a beautiful layout on any screen size. If the aspect ratio is different, some parts of the image may not be visible, but it achieves a presentation suited to the design.
Displaying images while maintaining aspect ratio
Next, if you want to fit the entire image into the parent element while maintaining its aspect ratio, contain is suitable.
1<div class="image-container">
2 <img src="example.jpg" alt="Example Image">
3</div>
4
5<style>
6.image-container img {
7 width: 100%;
8 height: 100%;
9 object-fit: contain;
10}
11</style>In this example, the image is scaled down to fit the container, resulting in some padding, but the original image is displayed without distortion.
Common mistakes
A common mistake when using object-fit is not setting the size of the parent element. object-fit is a property to fit content to the parent element, so if the size of the parent element is not clear, the expected effect cannot be achieved. Make sure the parent element has width or height properly set.
For example, in the following code, the height of the parent element is not specified, so object-fit does not function as intended.
1<div class="image-container">
2 <img src="example.jpg" alt="Example Image">
3</div>
4
5<style>
6.image-container {
7 width: 100%;
8 /* height: 150px; the parent element's height is not specified */
9}
10
11.image-container img {
12 object-fit: cover;
13}
14</style>In this case, you need to specify the height of the parent element or adjust the entire layout using flexbox or grid layout.
Situations where object-fit should be used
object-fit is important, especially in responsive design and websites that cater to various screen sizes. For example, it is useful in the following cases:.
- When you want to adjust images or videos to display correctly on different devices
- When you want to display background images or similar in full screen while allowing trimming
- When you want to fit an image into a parent element while maintaining its aspect ratio
- When you want to consistently display image sizes, such as in galleries
Using object-fit in these situations can maintain design consistency and enhance the user experience.
Summary
object-fit is a powerful CSS property that allows you to flexibly control how images and videos are displayed relative to their parent elements on a web page. By using different values such as fill, contain, cover, none, and scale-down, you can meet various design requirements. By understanding how to use it correctly and applying it appropriately, you can achieve visually appealing layouts.
object-position property
The CSS object-position property is used to control the positioning of content such as images and videos within an element. Using object-position, you can position content at specific points and provide visual effects that fit the layout.
Overview of object-position
object-position is mainly applied to media elements like <img> tags and <video> tags. This property controls where in its container the media is displayed. object-fit is often used in combination with object-position, where object-fit sets how an image or video fits the frame size, and object-position adjusts the display position of the content.
How to Specify Values
object-position can specify positions using one, two, or four values. However, specifying four values may not be supported by older browsers.
Specifying One Value
If only one value is specified, it is interpreted as the horizontal (X-axis) position, and the vertical (Y-axis) is automatically set to center.
- When specified as
object-position: left;, the object is positioned to the left. - When specified as
object-position: 70%;, the object is positioned 70% horizontally and centered vertically. - When specified as
object-position: 50px;, the object is positioned 50px from the left and centered vertically.
Specifying Two Values
Specifying two values allows you to set horizontal (X-axis) and vertical (Y-axis) positions individually.
- When specified as
object-position: center center;, the object is centered. - When specified as
object-position: right top;, the object is positioned at the top right. - When specified as
object-position: 75% 20%;, the object is positioned at 75% horizontally and 20% vertically. - When specified as
object-position: 50px 25px;, the object is positioned 50px from the left and 25px from the top.
Specifying Four Values
By specifying four values, you can provide more detailed positioning using keywords like left or top along with their offsets.
1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;- When specified as
object-position: left 10px top 20px;, the object is positioned 10px from the left and 20px from the top. - When specified as
object-position: right 15% bottom 30px;, the object is positioned 15% from the right and 30px from the bottom.
Value Specification Format
object-position can accept the following value formats.
- You can specify keywords such as
top,right,bottom,left, andcenter. - You can also specify values using percentages like
50%or units likepx.
For example, you can use it like this.
1img {
2 object-position: 50% 50%; /* Center the image */
3}
4
5video {
6 object-position: left top; /* Align to the top left */
7}Combination of Keywords and Percentages
It's also possible to mix keywords and percentages.
1img {
2 object-position: right 50%;
3}- In this example, the image is placed at the right edge, and vertically centered at 50%. This combination is very useful when flexible positioning is needed.
Combination with object-fit
object-position is often used together with object-fit. object-fit determines how an image or video is resized relative to its frame. For example, using object-fit: cover trims the image to fit the frame and positions it according to the specified object-position.
1img {
2 object-fit: cover;
3 object-position: right bottom;
4}- In this example, the image spreads across the entire container, displaying the bottom right part of the content.
Examples Combined with object-fit Values
You can specify the following values for object-fit.
fill: The image may be distorted, but it fits the entire container.contain: The entire image is displayed while maintaining the aspect ratio.cover: Trimmed to fit the container, while maintaining the aspect ratio.none: The image is displayed at its original size.
For example, using object-fit: contain displays the entire image and positions it according to the object-position setting.
1img {
2 object-fit: contain;
3 object-position: right;
4}With this setting, the image is placed on the right side of the container and the entire image is displayed.
Advanced Usage
object-position can be applied in various scenarios not only for simple positioning adjustments but also to enhance visual effects.
Emphasizing a Part of the Image
It is useful when you want to focus on a specific part of the image rather than displaying the whole image. Set object-fit to cover and use object-position to focus on a specific area.
1img {
2 object-fit: cover;
3 object-position: 25% 75%;
4}- In this example, the bottom left part of the image is displayed, emphasizing important parts.
When Using a Video as a Background
object-position also proves useful when using a video as a background. You can position the video at a specific location to maintain consistency with the overall page design.
1video {
2 object-fit: cover;
3 object-position: center top;
4}- In this setting, the video fits the entire page and is positioned at the top center.
Common Issues and Solutions
There may be a few issues when using object-position. Here, we introduce common issues and their solutions.
Part of the image is cut off
When using object-fit: cover, the image may be cropped to fit the container. In this case, by adjusting the display position with object-position, you can ensure that important parts are shown.
1img {
2 object-fit: cover;
3 object-position: center;
4}The image position is not as expected
Percentage specifications may not always be intuitive. It's necessary to consider the container's size and aspect ratio and experiment with different values. Using developer tools to adjust in real-time is effective.
Summary
object-position is a powerful tool for freely positioning media elements. By combining it with object-fit, flexible layouts adapted to the design can be achieved. Master keywords, percentages, and length units to maximize visual effects in various situations.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.