Question 267047 in Html Question posted in
Some basic documentation can be found here.

Html – How can I force an image to not stretch the height of a flexbox?

I am trying to make a simple flexbox that contains an image and a short paragraph of text, using next/image in next.js. In order to make it responsive, the text will wrap if the screen is too small, which varies the height of the flexbox. I’m trying to make the image fill the height of the flexbox while keeping its aspect ratio, but not stretch it so that the flexbox (and the image itself) becomes taller than the text.

Picture explaining the problem

I tried messing around with the fill, height, and width properties, and tried to recreate a minimal version of the problem in codesandbox. So far this is the closest I can get to what I want, but I want the image to be placed alongside the text, not overlapping it.

How can I accomplish this?

Tags:

2

Answers


  1. 0

    Without statically setting width and height properties I managed to get it work wrapping the Image in a relative container, keeping the fill and objectFit properties (used a div wrapper because fill or objectfit were applying a position: absolute to image).

    This seems to be your desired result.

    Login or Signup to reply.
  2. 0

    If you want to have a specific height for the image:

    height: 100px; /* choose the height you want  */
width: auto;
``
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search