Is it possible to have a px constraint and a vh constraint on the same image?

I have some cards with portrait-type images on the left and text on the right. I use a flexbox for this layout and have the max-width at 70vh to leave space for the text. This works OK but some images are being blown up too much for their resolution, so I’d like to limit the size to say 2x the original pixel size while still keeping the 70vh constraint. From the experimenting I’ve done so far it looks like you can only have one constraint at a time though. Is it possible to set the max-width to “70vh or 2x the original width, whichever is smaller”?

Maybe you could accomplish it with css’s min() function.

Yes, thanks. I just found out about that a couple of days ago. The next thing is to figure out how to set it dynamically. I know you can modify css rules using javascript but I haven’t got that bit working. I think this will turn out to be the solution though.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.