No Login Data Private Local Save

object‑fit & object‑position Demo - Online Image Scale Control

Developer Tools Educational CSS demo image object‑fit
45
0
0
0
Image Fit & Position Demo

Drop image here or click to upload

Supports JPEG, PNG, GIF, WebP (max 10MB)

Preview
Container: 500×300px (responsive)

      

    


    
    

      
All fit values with current position

      

      

         Each thumbnail shows the same container (120×100px) with the corresponding object-fit and the position you've selected.
      

    

  


  
  

    
Frequently Asked Questions

    

      

        

        

          
object-fit defines how an <img> or <video> should be resized to fit its container. It works similarly to background-size but for replaced elements. Common values are fill (stretch to fill, may distort), contain (scale to fit entirely, keeping aspect ratio), cover (scale to cover container, cropping if needed), none (no scaling), and scale-down (choose between none or contain, whichever results in a smaller size).

        

      

      

        

        

          
object-position sets the alignment of the replaced element inside its box when object-fit causes empty space or cropping. It accepts horizontal and vertical values (e.g., 50% 50% is center, 0% 0% is top left). You can also use keywords like top, bottom, left, right, and center. This tool lets you experiment with both percentage and keyword combinations.

        

      

      

        

        

          
Use cover when you need the image to completely fill the container (like hero banners or profile pictures) even if some parts get cropped. Use contain when you must see the entire image (like product photos in a grid) and letterboxing is acceptable. This demo highlights the difference clearly.

        

      

      

        

        

          
Yes, object-fit and object-position are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer does not support them, but IE usage is now negligible. For older browsers, you may need a polyfill or fallback using background images.

        

      

      

        

        

          
Absolutely! object-fit works on any replaced element, including <video> and <canvas>. You can achieve the same cropping/scaling effects for videos. This tool is built for images, but the same CSS properties apply.

        

      

      

        

        

          
If you need object-fit behavior on elements that aren’t <img>, consider using CSS background-image with background-size: cover or contain, and background-position. However, object-fit is more semantic and accessible for actual image content.

        

      

    

  









 🔧 Related Tools