0

JSFiddle (You can edit the dimensions in the image source to experiment with its size.)

I have a simple layout: a container with some text on the left and an image on the right side. Currently, the container will take the height of the image because it is bigger than the text.

What I am trying - and failing - to achieve is using object-fit: cover; and somehow getting the image to scale with the text. What I mean by that is that the image should take up half of the width of the screen, for which I set its width to 50 percent, but always take up the same height as the text to its left. If it is larger than the text, it should be clipped. I can do that by explicitly setting a height, but I do not know the height of the text, since it is dynamic.

I know that what I want to do is possible since I have seen it in action, for example here. The preview for a blog post on this site does the same thing. If I edit the HTML and change the image, that does not affect the height of the preview. I just do not understand how to replicate this effect.

Piet
  • 1
  • 2
  • Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=css+object-fit:cover+same+height+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Oct 17 '22 at 12:01
  • Hey! I did take the tour. I also searched SO, but did not find an answer to my question. If I have overlooked an answer to my question, I would be happy if you could point me towards it. I also did post a minimal reproducible example. It is literally in the first line of my question. I did not use the on-site tool for that, but that is because this way anybody trying to help me can edit my example in an attempt to find a solution. I also think that I described my problem in detail. Your comment not only did not help me with said problem, you also told me things I evidently did already. – Piet Oct 17 '22 at 12:10
  • Please post the [mcve] ***HERE***. You normally should get an error message saying "don't post JSFiddle without code here as well" so very strange. External links go stale or you reuse your fiddle for something else, that breaks the question since people cannot see the code you asked about – mplungjan Oct 17 '22 at 13:40
  • Seems you do not want to scale the image but instead scale the main container div to fit the text with overflow: hidden on the image container – mplungjan Oct 17 '22 at 13:43

0 Answers0