Streaming live at 10am (PST)

How to crop a dynamic images with css grid


#1

I cant figure out how to have the image that covers everything in a grid and dose not stretch or narrow. i know with dive blocks you can change the background that way but what about dynamic images.

Im trying to do that on the bottom of my main page
https://preview.webflow.com/preview/realestate-bdc930?utm_source=realestate-bdc930&preview=42e876997b1bc1a43131b82e90be6f8a


#2

Hi Vlad_Kuksenko,

It’s easy:

  • add an embed inside your grid (you can set it to display:none, right after)
  • paste the following into the embed:

Done!


#3

Can you do a screen recording, im 0% knowledge in coding. im confused if i do that and then import the image


#4

https://vimeo.com/302676035/bf5e1e27ff

You can do whichever order you want. Image first and then embed or the other way round as long as you know which css class you’ll be using. If you have any conflict with other images. Use another class and change the:
.image
to the class you want.


#7

here is what im getting, it still dose not set to “cover”. Im sure im doing something wrong

Here is my link, its under “test page”
https://preview.webflow.com/preview/realestate-bdc930?utm_source=realestate-bdc930&preview=42e876997b1bc1a43131b82e90be6f8a


#8

Hey @Vlad_Kuksenko, you’re almost there.

Add the image class name to every image that you wish to be set to cover. There are some styles on that class that need to be removed.

Change the height to 100% and display to auto. Now every image element with the class `image’ inside of a grid will fill the height and width of its grid position and then the image will fill that space using object-fit:cover.

You can change the class name to anything you’d like as long as it matches in the html embed and in the style panel. Hope that helps. Happy designing!

44%20AM


#9

You need to set the positioning in AUTO. And give a class name to you images.

edit: Thanks matthewpmunger much clearer like this


#10

It works! thanks guys! is there a good place for resources that will help me to get started with basics of CSS and java that I can use in webflow?