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

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!

---

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!