按比例将左侧图像缩放到右侧两行的高度

Question

我无法弄清楚如何在左侧按比例缩放右侧两条线的高度。 我尝试用flexbox解决问题，但没有保留纵横比。

 <div style="display: flex;">
     <img src="https://www.gnu.org/graphics/heckert_gnu.small.png">
     <div>
         <h1 style="font-size: 128px;">GNU</h1>
         <p style="font-size: 32px;">GNU is Not Unix</p>
     </div>
 </div>

https://jsfiddle.net/1gh1hr0c/

似乎涉及循环依赖。 img的宽度和高度的计算取决于右div的高度，div的高度取决于div的宽度。 flexbox需要图像的宽度来确定div ...

的宽度

无论如何，我试图做的事情仍然很安静，很简单。我认为应该有一个使用flexbox或某种花哨的解决方案。

Answer 1

将必须的st属性用于Flex容器align-items: center;

https://jsfiddle.net/1gh1hr0c/3/