Object-Fit Hero Issues

Happy New Year fellow designers!
I’m struggling with this new Object-Fit feature and could use a hand on my home page.
I have Hero Image set to Fit>Cover however when viewing smaller screen sizes, it then goes full width but doesn’t cover full height. How to make the image default to cover height instead of width?

Also, the HeroShade I’ve put above the image is extending beyond the section on the top and bottom. Can I fix this to make the bottom of the image always justified with the bottom of the section?

And does anyone know the diff between all the Fit types?

Thanks for your help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

as far as I’m reading this writeup on object-fit I believe I’m correct in using fit>cover. to fill the ‘Hero Image’ Div which is set to expand to 100% width and height of the section.

You’re almost there, put 100% width and height on your image and your Cover setting will look better.

Now here you could use a background image. Your image seems more like a decoration than a diagram, illustration of the topic: you’re showing a book, right, but the product, your service isn’t depicted here. So you could use a background image instead, on the div. Same result, the difference is that you can put an Alt description on the image, but you can’t if it’s a background-image.

Thank you so much @vincent I created the object-fit images instead of background image in an attempt to make my site load faster. When I run a speed test of https://www.crewbooks.app on Google’s test tool https://developers.google.com/speed I get only a pitiful score of 35. Any ideas how I can speed it up? All google’s suggestions are greek to me (other than image compression, which Ive done — MozJPG 2000px width)

Hi @TJwebflow, I would also check the domain hosting settings, check that the WWW domain is the default domain, see below an example:

After setting the WWW domain as the default domain, Publish your project

The two biggest factors are Page Weight and number of page requests.

https://tools.pingdom.com is a great tool to analyze the bottlenecks. For best/better than average performance performance the site page weight should be under 2mb and the number of requests below 60.

Currently the site is at 3.2mb, which is not too bad, but the number of requests is 117 which quite a bit:

I would recommend to reduce the number of requests, this could be by reducing the number of elements on a single page or check the custom code if that is adding lots of requests. A page is not considered completely loaded until all requests, both those coming from Webflow and from other services are finished.

A good thing to do is to create a baseline project, Duplicate a project and then remove all custom code used in project settings and on the page, then publish the duplicate and test that version to see the difference in performance.

I hope this helps, here is an article that shows how to generally troubleshoot website performance issues

Thanks in advance.

1 Like

Thank you so much @cyberdave this is a good info!

@cyberdave it shows that 40% (1.3 MB) of content load is font. I have uploaded custom fonts to my site. Would it be quicker do you think if I styled my site with Google Fonts instead?

Hey @cyberdave I deleted all custom code from the header (drift and google analytics) which brought me down to 2.3 MB and 74 requests. This without tweaking the 1.3mb font load I mentioned. Any idea how I can still track google analytics w/o it slowing my load speed? Also, Is there an image compression format you prefer? Let me know about the Google Font v. Custom font thing too?

It seems Object Fit doesn’t work on CMS items.