0

I'm trying to figure out how to have an image width/height to be at a ratio of 1:1 with the height/width to be dynamic based on the text content that is floating to the right of the image.

Flex box seems to do the opposite that I'm trying to achieve, since the more text content the less space it gives to that area.

Here is where I'm at: https://jsfiddle.net/3sx7r40j/

.container {
  width: 350px;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  border: 1px solid blue;
  margin-bottom: 25px;
}

.image {
  /** TODO Figure this css out **/
}

.image img {
  height: 100%;
  display: block;
  background: lightgrey;
}

.content {
  border: 1px solid yellow;
  font-size: 14px;
}
<div class="container">
  <div class="image">
    <img src="https://svgshare.com/i/NRA.svg">
  </div>
  <div class="content">
    Here is content that is only one line.
  </div>
</div>

<div class="container">
  <div class="image">
    <img src="https://svgshare.com/i/NRA.svg">
  </div>
  <div class="content">
    Here is the content that is even longer and longer and goes on two lines which the image on the left needs to be larger
  </div>
</div>


<div class="container">
  <div class="image">
    <img src="https://svgshare.com/i/NRA.svg">
  </div>
  <div class="content">
    Here is the content that is the longest and will continue on three lines or four lines etc... and the image needs to continue to grow based on the height of the content.
  </div>
</div>

Here is an image of the current state:

https://i.stack.imgur.com/mOzPL.png

This is the desired result:

https://i.stack.imgur.com/UhRek.png

The image is a SVG which is flexible as the the size. I know there is ways to do this with JS but I'm looking for a pure CSS solution if possible.

The structure of the div's is flexible if there is a better structure to use flex box columns since they seem to adjust the height but I don't know, I'm newer to flex box.

Dustin
  • 1
  • 1
  • you cannot do this: (1) the text will define the height (2) the image height will fit it (3) the width of the image will change (4) the change of the width will change the text width (5) the text height will change and we are back to (1) ---> infinite loop – Temani Afif Jul 31 '20 at 19:22
  • @TemaniAfif - you might be right, just wanted to see if there were some CSS experts out there that could see if I was missing something. – Dustin Jul 31 '20 at 21:08

1 Answers1

0

I think the followng CSS code will help you

.container {
  width: 350px;
  display: flex;
  align-items:center;
  border: 1px solid blue;
  margin-bottom: 25px;
}

.image {
   background: lightgrey;
   height: 100%;
}

.image img {
  height: 100%;
  width:100%;
}

.content {
  border: 1px solid yellow;
  font-size: 14px;
  flex:1;
}
Shawn Vn
  • 297
  • 1
  • 14
  • the thing is the height and the width are based on the text length what pushes the container to have a greater height. See the desired result image. – Dustin Jul 31 '20 at 18:49