Forem

Kabue Charles
Kabue Charles

Posted on

2 2

Is it possible to have a responsive image in a flexbox item?

I asked a question on stack-overflow on adding a responsive image in a flex box item and haven't received a good answer yet.

If the image is one of the flex-box item, it works well - (Jsfiddle)

When the image is inside a flex item, it starts to misbehave.

Scenario 1: Image stretches distorting the aspect ratio (Jsfiddle)

Scenario 2: Image leaves empty space (Jsfiddle)

Scenario 3: The layout is good until the input receives focus, then everything breaks: Jsfiddle

This happens in IE 11, Chrome (Version 67.0.3396.87 (Official Build) (64-bit)), but haven't tested in Firefox and Edge.

Is there something i haven't studied about Flex-box, or is it a bug?

https://stackoverflow.com/q/51001326/3563013

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (3)

Collapse
 
equinusocio profile image
Mattia Astorino • • Edited

On firefox all works as expected. On Chrome it seems to be a render error because if you uncheck/check one of img or .funny properties from the inspector the image issue get fixed.

Btw, since .parent have a fixed height (it force the aspect ratio of the image) you can't make the last image covering the space maintaining his aspect ratio without touching .funny. You can try to use object-fit cover on the last image..but it will crop the image.

You can also set .funny to have a max-with that match your requirements.

Collapse
 
jhomkarlo profile image
Jhomkarlo •

Well, i don't know why div.funny doesn't take the width of it's contents, i prefer avoiding those and thinking differently.

You can take the img and putting as a direct child of div.parent

jsfiddle.net/ohLc5xyw/126/

I hope this work for you.

Collapse
 
mckabue profile image
Kabue Charles • • Edited

thanks. i noted that when the image is a direct flex-item, it works, until it is a child of another flex item. the latter is my requirement... i also noted that when i specify the height of the image in pixels, it works, but that is half responsive... jsfiddle.net/ohLc5xyw/100/

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay