The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Constraing image size within a flex item

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #198484


    I’m having a bit of a headache trying to constrain the size of an image inside a flex item.

    Without further ado:

    In Firefox: the width of the link (blue border) is stuck at the real pixel width of the image.

    In Chrome: the width of the link gets stuck at the pixel width of the image upon first render of the page. The pixel width of the link remains the same when the viewport is resized.

    The image itself could be made to fit with far less markup but the intended application will require another element to be wrapped around it (blue border in the pen).

    I have tried the other usual methods for centering the image and its wrapper but all so far seem to prevent the image from keeping its aspect ratio and/or max dimensions.

    I’m stumped – any suggestions would be most welcome!


    Had another shot at this, this is the next iteration:

    Not quite what I was hoping for but a few media queries should sort out the remaining issues.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.