Cropping images with Object Fit


32 thoughts on “Cropping images with Object Fit

  1. And for those who cares about older browsers that may not support object-fit, take a look at the technique provided by Sarah Soueidan with SVG : www.sarasoueidan.com/blog/svg-object-fit/

  2. Very interesting! But how would you make a fallback on browsers not supporting this feature? Make it behind a @support rule?

  3. Object-position could have a face-detection algorithm so something in the lines of

    object-position: face;

    Could be a thing. In the case of multiple faces, it could center at the largest face (supposing largest = closest to foreground) or the mid point between all faces

  4. I'm already familiar with the latest properties Jen has showcased, but she has a very simple, natural way to explain it that I enjoy very much just hearing.

  5. Well, this is one of those rarely cases, where I watch one video then I completely fall in love with the channel. The way you explain things, just like my mom totally awesome!! It just feels right to subscribe.

    The concept is veeery powerful, thanks to you, hopea I'll learn much from you.
    Greetings from Tanzania

  6. Hi! I'm just starting so I'm trying to "steel" everything I could and Jen is awesome! I have nevertheless a doubt on this layout: when it goes from 848px wide to 600px aprox, is that layout on purpose and if "yes" it is the answer, why? Thanks for this great channel! ❤ > http://labs.jensimmons.com/2016/examples/grace-hopper-page.html

  7. So, it helps avoid extra markup with a surrounding div set at background-size:cover for static elements, and adds the possibility to do this dynamically on a CMS. THIS IS AWESOME!! Thank you!

  8. Oh my Gosh, tnx a lot, im finding it for for 2days, now i found it the only code is object fit, cover. Wtf

  9. I cant believe this after a full day of searching i finally found what i was looking for, thank you very much!

  10. When I set background with object-fit:cover and 100vw x 100vh I get horizontal scroll. I can fix it with overflow:hidden but why that happens?

  11. first thing first thank you so much! & I think that it's the same as background-size/position so what's the new in these properties ?

  12. hi, cool video. how can i set bottom of the image to be used instead of the center? i need the bottom emphasised. its for food images in a jumbotron hero slideshow and the imgs they have all have food in foreground, which is not viewable at larger viewport sizes. thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *