Streaming live at 10am (PST)

Image Constrained to Section


#1

Hi Guys,

Cleaning up my site today - one last layout/constraint issue.

How do I get this image to constrain to the slider Div? Both when it is in Normal browser mode, and when scaled down for Ipad?

Thanks in advance


https://preview.webflow.com/preview/haydenmartisstudio?utm_source=haydenmartisstudio&preview=177b7624fd6d0325744ed7d959af5457


#2

If I understand you correctly try adding this 1 line of css code to your page whether it’s in the head of that page in the page settings or in a Custom Code embed element somewhere on that page preferably at the top of the page somewhere:

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

#3

Thanks for the reply -

Have tested another way using background images in the mean time -

Would that be a cleaner way to do it?



#4

Yes definitely! Background images is a great way to do that. I didn’t know if you wanted to use the actual image element.

Just for the future if you did need to use the image element and wanted the photos to be contained within a container or to fill the whole area of a container without being stretched or anything weird just like background images, you can use the small css code snippet I posted above. Now the cool thing is you can give a specific class for images that need to be set to “contain” or a different class for any images that need to “cover” the entire parent div/container.

Like this here:

<style>
  .contain-img {
    object-fit: contain;
  }
</style>

<style>
  .cover-img {
    object-fit: cover;
    background-position: 50%;
  }
</style>

So you can see the class names “contain-img” and “cover-img” have different property values like “contain” and “cover” for object-fit. So anywhere inside of Webflow where you need and image to have those values/properties you can just add either of those classes whenever you need to.

Also the background position can be adjusted with percentage which is nice. 50% would be center. I’m telling you this for certain cases where you’d need to use actual Image Elements instead of background images on div elements.

Hope this helps shed some clarity and overall, yes if you can use background image that would be one way to go inside Webflow without the use of any extra CSS code. :slight_smile:

-Noah


#5

Thanks for the detailed reply Noah!

I am method agnostic, so whatever gets the job done and works right I don’t care.

Will you script thingy take care of this sizing issue when I squish the browser? The image size should stay proportional regardless if it is being scaled down.


#6

Bump - any ideas how I can fix this?