CSS 13 💻 image orientation, image rendering, object fit and object position properties - KandZ

⏱️ Estimated read: 17 min | |

These CSS properties give you precise control over how images are oriented, rendered, fitted, and positioned within their containers — essential for responsive and high-quality image display.

Overview of Properties

Property	Description	Common Values
`image-orientation`	Specifies the orientation of an image	`none`, `from-image`
`image-rendering`	Controls how browsers render images	`auto`, `crisp-edges`, `pixelated`
`object-fit`	How content is resized to fit its container	`contain`, `cover`, `fill`, `none`, `scale-down`
`object-position`	Alignment of the image within its container	`top`, `center`, `bottom`, `left`, `right`, `%`, `px`

1. image-orientation

The image-orientation property specifies how an image should be oriented based on its EXIF data (metadata from cameras and phones).

.from-image {
    image-orientation: from-image; /* Uses EXIF orientation data */
}

.none {
    image-orientation: none; /* Ignores EXIF orientation data */
}

Values

Value	Description	Example
`from-image`	Uses the image’s EXIF orientation data	`image-orientation: from-image;`
`none`	Ignores EXIF orientation data	`image-orientation: none;`

Use case: Photos taken on smartphones often contain EXIF orientation data. Use from-image to automatically rotate them correctly.

2. image-rendering

The image-rendering property controls how browsers render images when they are scaled up or down.

.image-pixelated {
    image-rendering: pixelated; /* Forces pixelated edges (retro look) */
}

.image-crisp {
    image-rendering: crisp-edges; /* Ensures sharp edges */
}

.image-auto {
    image-rendering: auto; /* Default — browser decides */
}

Values

Value	Description	Example
`auto`	Default — browser decides the best rendering	`image-rendering: auto;`
`crisp-edges`	Ensures sharp, crisp edges (no blur)	`image-rendering: crisp-edges;`
`pixelated`	Renders with pixelated edges (retro/pixel-art look)	`image-rendering: pixelated;`

Use case:

pixelated — for pixel art, retro games, or when scaling up small icons
crisp-edges — for line art, QR codes, or any image where sharp edges matter

3. object-fit

The object-fit property specifies how an image or video should be resized to fit its container. It works on replaced elements like <img>, <video>, and <canvas>.

img.contain {
    object-fit: contain; /* Fits within container without cropping */
}

img.cover {
    object-fit: cover; /* Fills container, crops if needed */
}

img.fill {
    object-fit: fill; /* Stretches to fill (may distort) */
}

img.none {
    object-fit: none; /* Original size, may overflow */
}

img.scale-down {
    object-fit: scale-down; /* Smallest of none or contain */
}

Values

Value	Description	Aspect Ratio	Cropping
`contain`	Scales to fit within container	Preserved	No
`cover`	Scales to fill container	Preserved	Yes (crops)
`fill`	Stretches to fill container	Distorted	No
`none`	Keeps original size	Preserved	May overflow
`scale-down`	Like `none` or `contain`, whichever is smaller	Preserved	No

Visual Summary:

contain — “Show the whole image, even if there’s empty space”
cover — “Fill the entire container, crop if necessary”
fill — “Stretch to fill, even if it distorts”
none — “Keep the original size”
scale-down — “Shrink if too large, otherwise keep original”

4. object-position

The object-position property sets the alignment of an image or video within its container when object-fit is applied.

img.top-left {
    object-fit: cover;
    object-position: top left; /* Top-left corner */
}

img.center-center {
    object-fit: cover;
    object-position: center; /* Centered both horizontally and vertically */
}

img.bottom-right {
    object-fit: cover;
    object-position: bottom right; /* Bottom-right corner */
}

Values

Value	Description	Example
`top`	Top alignment	`object-position: top;`
`bottom`	Bottom alignment	`object-position: bottom;`
`left`	Left alignment	`object-position: left;`
`right`	Right alignment	`object-position: right;`
`center`	Center alignment	`object-position: center;`
`x% y%`	Percentage values	`object-position: 25% 75%;`
`xpx ypx`	Pixel values	`object-position: 20px 40px;`
`offset`	Offset values	`object-position: bottom 20px right 30px;`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image-orientation, image-rendering, object-fit, object-position</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 5px;
        }

        /* ====== IMAGE CONTAINERS ====== */
        .img-container {
            width: 200px;
            height: 150px;
            border: 2px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px auto;
        }

        .img-container img {
            width: 100%;
            height: 100%;
        }

        /* ====== OBJECT FIT DEMOS ====== */
        .fit-contain img {
            object-fit: contain;
        }

        .fit-cover img {
            object-fit: cover;
        }

        .fit-fill img {
            object-fit: fill;
        }

        .fit-none img {
            object-fit: none;
        }

        .fit-scale-down img {
            object-fit: scale-down;
        }

        /* ====== OBJECT POSITION DEMOS ====== */
        .pos-top-left img {
            object-fit: cover;
            object-position: top left;
        }

        .pos-center img {
            object-fit: cover;
            object-position: center;
        }

        .pos-bottom-right img {
            object-fit: cover;
            object-position: bottom right;
        }

        .pos-top-right img {
            object-fit: cover;
            object-position: top right;
        }

        .pos-bottom-left img {
            object-fit: cover;
            object-position: bottom left;
        }

        /* ====== IMAGE RENDERING DEMOS ====== */
        .render-pixelated img {
            image-rendering: pixelated;
        }

        .render-crisp img {
            image-rendering: crisp-edges;
        }

        .render-auto img {
            image-rendering: auto;
        }

        /* ====== IMAGE ORIENTATION DEMO ====== */
        .orientation-from-image img {
            image-orientation: from-image;
        }

        .orientation-none img {
            image-orientation: none;
        }

        /* ====== PLACEHOLDER IMAGES (inline SVG) ====== */
        .demo-img {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>

    <h1>image-orientation, image-rendering, object-fit, object-position</h1>

    <!-- ====== 1. OBJECT-FIT ====== -->
    <section>
        <h2>1. object-fit</h2>
        <p>These demos use a 200×150 container with a wide image to show how each value behaves.</p>

        <div class="grid-3">
            <div>
                <h4>object-fit: contain</h4>
                <div class="img-container fit-contain">
                    <img src="https://via.placeholder.com/400x200/007bff/ffffff?text=Contain" alt="Contain">
                </div>
                <p class="note">Fits within container — preserves aspect ratio, no cropping.</p>
            </div>

            <div>
                <h4>object-fit: cover</h4>
                <div class="img-container fit-cover">
                    <img src="https://via.placeholder.com/400x200/28a745/ffffff?text=Cover" alt="Cover">
                </div>
                <p class="note">Fills container — preserves aspect ratio, crops if needed.</p>
            </div>

            <div>
                <h4>object-fit: fill</h4>
                <div class="img-container fit-fill">
                    <img src="https://via.placeholder.com/400x200/dc3545/ffffff?text=Fill" alt="Fill">
                </div>
                <p class="note">Stretches to fill — may distort the aspect ratio.</p>
            </div>

            <div>
                <h4>object-fit: none</h4>
                <div class="img-container fit-none">
                    <img src="https://via.placeholder.com/400x200/ffc107/333333?text=None" alt="None">
                </div>
                <p class="note">Keeps original size — may overflow.</p>
            </div>

            <div>
                <h4>object-fit: scale-down</h4>
                <div class="img-container fit-scale-down">
                    <img src="https://via.placeholder.com/400x200/6c5ce7/ffffff?text=Scale+Down" alt="Scale Down">
                </div>
                <p class="note">Smallest of none or contain.</p>
            </div>
        </div>

        <div class="code-block">
            object-fit: contain;      /* Fits within container, no crop */
            object-fit: cover;        /* Fills container, crops if needed */
            object-fit: fill;         /* Stretches to fill (may distort) */
            object-fit: none;         /* Original size, may overflow */
            object-fit: scale-down;   /* Smallest of none or contain */
        </div>
    </section>

    <!-- ====== 2. OBJECT-POSITION ====== -->
    <section>
        <h2>2. object-position</h2>
        <p>All examples use <code>object-fit: cover</code> with different positions.</p>

        <div class="grid-3">
            <div>
                <h4>object-position: top left</h4>
                <div class="img-container pos-top-left">
                    <img src="https://via.placeholder.com/400x200/007bff/ffffff?text=Top+Left" alt="Top Left">
                </div>
            </div>

            <div>
                <h4>object-position: center</h4>
                <div class="img-container pos-center">
                    <img src="https://via.placeholder.com/400x200/28a745/ffffff?text=Center" alt="Center">
                </div>
            </div>

            <div>
                <h4>object-position: bottom right</h4>
                <div class="img-container pos-bottom-right">
                    <img src="https://via.placeholder.com/400x200/dc3545/ffffff?text=Bottom+Right" alt="Bottom Right">
                </div>
            </div>

            <div>
                <h4>object-position: top right</h4>
                <div class="img-container pos-top-right">
                    <img src="https://via.placeholder.com/400x200/ffc107/333333?text=Top+Right" alt="Top Right">
                </div>
            </div>

            <div>
                <h4>object-position: bottom left</h4>
                <div class="img-container pos-bottom-left">
                    <img src="https://via.placeholder.com/400x200/6c5ce7/ffffff?text=Bottom+Left" alt="Bottom Left">
                </div>
            </div>
        </div>

        <div class="code-block">
            object-position: top left;      /* Top-left corner */
            object-position: center;        /* Centered */
            object-position: bottom right;  /* Bottom-right corner */
            object-position: top right;     /* Top-right corner */
            object-position: bottom left;   /* Bottom-left corner */

            /* Percentage values */
            object-position: 25% 75%;

            /* Pixel values */
            object-position: 20px 40px;

            /* Offset values */
            object-position: bottom 20px right 30px;
        </div>
    </section>

    <!-- ====== 3. IMAGE-RENDERING ====== -->
    <section>
        <h2>3. image-rendering</h2>
        <p>These demos use a small image scaled up to show the rendering difference.</p>

        <div class="grid-3">
            <div>
                <h4>image-rendering: auto (default)</h4>
                <div class="img-container render-auto" style="width: 150px; height: 150px;">
                    <img src="https://via.placeholder.com/50x50/007bff/ffffff?text=A" alt="Auto" style="width: 100%; height: 100%;">
                </div>
                <p class="note">Browser default — may be blurry or smooth.</p>
            </div>

            <div>
                <h4>image-rendering: pixelated</h4>
                <div class="img-container render-pixelated" style="width: 150px; height: 150px;">
                    <img src="https://via.placeholder.com/50x50/28a745/ffffff?text=B" alt="Pixelated" style="width: 100%; height: 100%;">
                </div>
                <p class="note">Pixelated edges — retro/pixel-art look.</p>
            </div>

            <div>
                <h4>image-rendering: crisp-edges</h4>
                <div class="img-container render-crisp" style="width: 150px; height: 150px;">
                    <img src="https://via.placeholder.com/50x50/dc3545/ffffff?text=C" alt="Crisp" style="width: 100%; height: 100%;">
                </div>
                <p class="note">Sharp, crisp edges — no blur.</p>
            </div>
        </div>

        <div class="code-block">
            image-rendering: auto;          /* Default — browser decides */
            image-rendering: pixelated;     /* Pixelated edges (retro look) */
            image-rendering: crisp-edges;   /* Sharp, crisp edges */
        </div>
    </section>

    <!-- ====== 4. IMAGE-ORIENTATION ====== -->
    <section>
        <h2>4. image-orientation</h2>
        <p>This property is primarily used for images with EXIF orientation data (e.g., from smartphones).</p>

        <div class="grid-2">
            <div>
                <h4>image-orientation: from-image</h4>
                <div class="img-container orientation-from-image" style="width: 200px; height: 150px;">
                    <img src="https://via.placeholder.com/300x200/007bff/ffffff?text=From+Image" alt="From Image">
                </div>
                <p class="note">Uses EXIF orientation data to rotate the image correctly.</p>
            </div>

            <div>
                <h4>image-orientation: none</h4>
                <div class="img-container orientation-none" style="width: 200px; height: 150px;">
                    <img src="https://via.placeholder.com/300x200/28a745/ffffff?text=None" alt="None">
                </div>
                <p class="note">Ignores EXIF orientation data — image displays as stored.</p>
            </div>
        </div>

        <div class="code-block">
            image-orientation: from-image;  /* Uses EXIF orientation data */
            image-orientation: none;        /* Ignores EXIF orientation data */
        </div>
    </section>

    <!-- ====== 5. COMBINED EXAMPLE ====== -->
    <section>
        <h2>5. Combined Example</h2>

        <div class="grid-2">
            <div>
                <h4>Responsive Image Card</h4>
                <div class="img-container" style="width: 100%; height: 200px; border-radius: 12px;">
                    <img src="https://via.placeholder.com/600x400/6c5ce7/ffffff?text=Responsive+Card" 
                         alt="Responsive Card"
                         style="object-fit: cover; object-position: center; image-rendering: auto;">
                </div>
                <p class="note">object-fit: cover + object-position: center + image-rendering: auto</p>
            </div>

            <div>
                <h4>Pixel Art Icon</h4>
                <div class="img-container" style="width: 150px; height: 150px;">
                    <img src="https://via.placeholder.com/32x32/ffc107/333333?text=★" 
                         alt="Pixel Art"
                         style="object-fit: contain; image-rendering: pixelated; width: 100%; height: 100%;">
                </div>
                <p class="note">object-fit: contain + image-rendering: pixelated</p>
            </div>
        </div>

        <div class="code-block">
            /* Responsive image card */
            img {
                object-fit: cover;
                object-position: center;
                image-rendering: auto;
            }

            /* Pixel art */
            img.pixel-art {
                object-fit: contain;
                image-rendering: pixelated;
            }
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>6. Reference Tables</h2>

        <h3>image-orientation Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>from-image</code></td>
                <td>Uses the image's EXIF orientation data</td>
                <td><code>image-orientation: from-image;</code></td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>Ignores EXIF orientation data</td>
                <td><code>image-orientation: none;</code></td>
            </tr>
        </table>

        <h3>image-rendering Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>auto</code></td>
                <td>Default — browser decides the best rendering</td>
                <td><code>image-rendering: auto;</code></td>
            </tr>
            <tr>
                <td><code>crisp-edges</code></td>
                <td>Ensures sharp, crisp edges (no blur)</td>
                <td><code>image-rendering: crisp-edges;</code></td>
            </tr>
            <tr>
                <td><code>pixelated</code></td>
                <td>Renders with pixelated edges (retro/pixel-art look)</td>
                <td><code>image-rendering: pixelated;</code></td>
            </tr>
        </table>

        <h3>object-fit Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Aspect Ratio</th>
                <th>Cropping</th>
            </tr>
            <tr>
                <td><code>contain</code></td>
                <td>Scales to fit within container</td>
                <td>Preserved</td>
                <td>No</td>
            </tr>
            <tr>
                <td><code>cover</code></td>
                <td>Scales to fill container</td>
                <td>Preserved</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td><code>fill</code></td>
                <td>Stretches to fill container</td>
                <td>Distorted</td>
                <td>No</td>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>Keeps original size</td>
                <td>Preserved</td>
                <td>May overflow</td>
            </tr>
            <tr>
                <td><code>scale-down</code></td>
                <td>Smallest of none or contain</td>
                <td>Preserved</td>
                <td>No</td>
            </tr>
        </table>

        <h3>object-position Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>top</code></td>
                <td>Top alignment</td>
                <td><code>object-position: top;</code></td>
            </tr>
            <tr>
                <td><code>bottom</code></td>
                <td>Bottom alignment</td>
                <td><code>object-position: bottom;</code></td>
            </tr>
            <tr>
                <td><code>left</code></td>
                <td>Left alignment</td>
                <td><code>object-position: left;</code></td>
            </tr>
            <tr>
                <td><code>right</code></td>
                <td>Right alignment</td>
                <td><code>object-position: right;</code></td>
            </tr>
            <tr>
                <td><code>center</code></td>
                <td>Center alignment</td>
                <td><code>object-position: center;</code></td>
            </tr>
            <tr>
                <td><code>x% y%</code></td>
                <td>Percentage values</td>
                <td><code>object-position: 25% 75%;</code></td>
            </tr>
            <tr>
                <td><code>xpx ypx</code></td>
                <td>Pixel values</td>
                <td><code>object-position: 20px 40px;</code></td>
            </tr>
            <tr>
                <td><code>offset</code></td>
                <td>Offset values</td>
                <td><code>object-position: bottom 20px right 30px;</code></td>
            </tr>
        </table>
    </section>

</body>
</html>

Quick Reference

Property	Description	Common Values
`image-orientation`	Image orientation based on EXIF	`none`, `from-image`
`image-rendering`	How images are rendered when scaled	`auto`, `crisp-edges`, `pixelated`
`object-fit`	How content is resized to fit its container	`contain`, `cover`, `fill`, `none`, `scale-down`
`object-position`	Alignment of the image within its container	`top`, `center`, `bottom`, `left`, `right`, `%`, `px`

Best Practices

✅ Do This:

/* Use object-fit: cover for responsive image cards */
.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

/* Use image-rendering: pixelated for pixel art */
.pixel-art {
    image-rendering: pixelated;
}

/* Use object-fit: contain for logos */
.logo {
    object-fit: contain;
}

/* Use image-orientation: from-image for user-uploaded photos */
.user-photo {
    image-orientation: from-image;
}

❌ Don’t Do This:

/* Don't use object-fit: fill for photos (distorts) */
.photo {
    object-fit: fill;  /* Faces may look stretched */
}

/* Don't use object-fit without a defined width/height */
img {
    object-fit: cover;  /* Won't work without dimensions */
}

/* Don't use image-rendering: pixelated for regular photos */
.photo {
    image-rendering: pixelated;  /* Makes photos look blocky */
}

Pro Tip: Use object-fit: cover with object-position: center for responsive image cards and hero sections. Use object-fit: contain for logos and icons where the entire image must be visible. Use image-rendering: pixelated for pixel art and retro games. Always set image-orientation: from-image for user-uploaded photos to respect EXIF orientation data!

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!