Object Fit

    Contain

    Resize an element’s content to stay contained within its container using .

    Resize an element’s content to cover its container using .object-cover.

    Object Fit - 图2

    1. <div class="bg-indigo-300 ...">
    2.   <img class="object-cover h-48 w-full ...">
    3. </div>

    Fill

    Stretch an element’s content to fit its container using .object-fill.

    Display an element’s content at its original size ignoring the container size using .object-none.

    1. <div class="bg-yellow-300">
    2.   <img class="object-none h-48 w-full ...">
    3. </div>

    Scale Down

    Display an element’s content at its original size but scale it down to fit its container if necessary using .

    Object Fit - 图5

    To control how a replaced element’s content should be resized only at a specific breakpoint, add a {screen}: prefix to any existing object fit utility. For example, adding the class md:object-scale-down to an element would apply the object-scale-down utility at medium screen sizes and above.

    1. <div>
    2. </div>

    Customizing

    By default, only responsive variants are generated for object-fit utilities.

    You can control which variants are generated for the object-fit utilities by modifying the objectFit property in the variants section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    Disabling

    If you don’t plan to use the object-fit utilities in your project, you can disable them entirely by setting the property to false in the corePlugins section of your config file:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     objectFit: false,
    6.     }
    7.   }

     Object Position→