Expose object-fit and object-position on image elements

The only alternative is to use a background image which is hacky!

  • Collin
  • Nov 29 2017
  • Shipped
  • Dec 20, 2019

    Admin response

    Good news! Now you can use the object-fit property to control how images resize within parent elements, giving you a more accessible and faster-loading alternative to background images.

    Read all about it in our update.

  • Tiada Guru commented
    8 Jan, 2020 11:57pm

    For everyone still waiting on object-fit (which was *not* shipped, unfortunately as the metadata aboveclaims), Webflow has created a separate Wishlist idea here: 

    https://wishlist.webflow.com/ideas/WEBFLOW-I-2486

  • Fernando Rojo commented
    29 Oct, 2019 03:22pm

    Ah, this is still so needed! Background image is bad for SEO and requires a lot of custom resizing :(

  • Martin Baillie commented
    19 Mar, 2019 06:31pm

    For those using custom code workarounds for this at the moment, a heads up that you can get this to preview in the Designer by adding your CSS to an Embed component on the page you are working on, and also turn this into a Symbol to use/edit the same chunks of code across various pages.

  • Martin Baillie commented
    19 Mar, 2019 03:36pm

    Using custom code at the moment but to me seems vital to have this functioning 'out of the box' asap, or alternatively at least get optimised background images as a stop-gap. Having neither of these is just as bad as the lack of an image gallery function. There's a lot to love about Webflow, but the basics required for building templates around a CMS (with editors who can't crop and compress every image they upload) need to be covered before adding additional bells and whistles to the platform.

  • Vincent Bidaux commented
    14 Mar, 2019 09:49am

    Here is what I described on the idea that was merged with this one: Title says it all. Even Webflow's tutorial videos are full of examples of bg images being used instead of images. When images make sense in the context of the content, they should stay as images, be in the HTML code, have an alt-text.

    Bringing object-fit to the UI, Webflow will make it possible for designer to produce better, accessible code, by letting them have as many options to fit and crop images than they have with bg-images.

    By chosing what it brings to its native options, Webflow has a great responsibility in making designers respect the standards and teach them the good practices around semantic code and accessibility.

    PS: it could be a very simple addition to the actual UI, using the already existing bg-image module. If an image is selected, we could use this module, not to _add a bg_ but to _add a fitting property_ with almost identical options.

     

  • Alex Dixon commented
    22 Feb, 2019 01:42pm

    +1

    Especially useful as it would also tap into how Webflow serves responsively sized imagery.

  • Bryan Garrant commented
    4 Feb, 2019 12:54pm

    How do we get this in Webflow?  I know you can add custom code but this is a CSS component we need to avoid using all those divs with background images.  We really need this!

  • Forrest O. commented
    23 Jan, 2019 02:58pm

    Custom code workaround until this UI ships:

    <style>
    .person-image {
      object-fit: cover;
    }
    </style>

    More info: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
  • Craig Garner commented
    18 Dec, 2018 05:25am

    +1 on this, it's such a good way to deal with background images. Edge finally has compatibility, so it's only older versions of IE that don't. I'd love to see this included!

  • Derek Long commented
    18 Sep, 2018 02:43pm

    Surprised this doesn't have more votes. My guess is that a lot of people haven't used it. This property is a perfect alternative to background images.

    A duplicate is here with even less votes: https://wishlist.webflow.com/ideas/WEBFLOW-I-1334

  • +86