Hi guys,
I have tried my first flexbox layout for a shop which works ok, but can’t figure out how to make images flexible and behave similar like I have set now with CSS background images. I would like have the images be flexible and cropped to the amount of text description underneath or beside them.
Thanks for any ideas.
Here is my public share link: https://preview.webflow.com/preview/flexbox-grid-layout-100e0-e28edce48bbb2?preview=670f974f999d0a1287528015b4c665cf
I’m a bit confused on exactly what you are looking for. Using background images is the only way to have the image stay a set size and cropping off the excess using the cover setting.
Hi DFink,
I think that I have just sort it out. I used on a container “overflow hidden” plus image with “min width and hight” aprox 150% it seems that it does the same job. What do you think? could be any problem with that?
Unfortunately this technique: “overflow for images” with “min-width or min-hight” aprox 150%" works only in chrome, on other browsers is badly broken 
here is second example with out image-background
What you are describing is exactly how background images work. Why not just use those?
I don’t want to use or depend only on background images because from what I read it is not good SEO practise for loosing alt tags or accessibility issues for screen readers. Also that would be very awkward if the client wants to change the pictures dynamically with a shops CMS (not the webflow).
If you set the images up to source the bg image from a collection image, they can update it. Also you will marginally effect so if at all. Chances are that since the site is responsive, you will be so far ahead on ranking.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.