How do i make this image always the same height as a neighboring division?

Hi,

I often find with these types of questions that people don’t really understand what they are asking for:)

For an image not to appear stretched it has to maintain its aspect ratio which means than in order to fit a box that is not the same size as its aspect ratio then the image has to overflow and then be cropped in one direction allowing both dimensions to fill the container. This means an image can never look exactly the same after this affect has taken place. This in effect is exactly what object-fit does (not supported in IE11 yet) for foreground images and what background-size:cover does for background images.

Therefore the easiest solution would be to use a background image and use background-size:cover.

If it must be a foreground image and good browser support is required then you can use a technique that almost mimics object-fit and looks like this:

Note that the height of the boxes is set by the text and should you have no text then you have no image either (but that is exactly what you asked for). Also note that if the window is narrow and the textbox becomes very tall then so does the image and there will be little of the original content of the image showing because it will be sized many times greater to make sure it fits and maintains the aspect ratio.

Hope that all makes sense. :slight_smile:

4 Likes