フレックスボックスに画像の縦横比を維持する

Question

イメージの横にテキストを配置し、両方を中央に配置したいとします。 Flexboxはこれでうまくいくようですが、イメージは絶え間なく押し寄せています。どのように私は元のアスペクト比で画像を保持することができますの任意のアイデア？

.container { 
 
    display: flex; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    border: red 1px solid; 
 
} 
 
img { 
 
    height: 300px; 
 
    width: 300px; 
 
} 
 
p { 
 
    padding: 30px; 
 
}

<div class="container"> 
 
    <p class="inner">Lorem Pisum Doelem sipsum iflup getsup in da tubsusb 
 
    </p> 
 
    <img src="https://i.vimeocdn.com/portrait/15351700_300x300" /> 
 
</div>

これは私がやろうとしているものの一例です。私はフレックスボックスがこれのために動作すると思う、私はちょっとした問題を抱えている。

http://mojave-demo.squarespace.com/our-team-mojave/

Answer 1

このようにしますか？

https://jsfiddle.net/y5k9zqby/

.container { 
display: flex; 
width: 100%; 
margin: 0 auto; 
border: red 1px solid; 
} 

img{ 
max-height: 300px; 
width: 100%; 
overflow:hidden; 

} 

p{ 
padding: 30px; 
} 

Answer 2

あなたは、その本質的な寸法が影響されないように、別の容器に画像を配置する必要があります。

.container { 
 
    align-items: center; 
 
    display: flex; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    border: red 1px solid; 
 
} 
 

 
.image { 
 
    flex: 1; 
 
    max-width: 50%; 
 
    min-width: 50%; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
p { 
 
    padding: 30px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <p class="inner">Lorem Pisum Doelem sipsum iflup getsup in da tubsusb 
 
    </p> 
 
    <div class="image"> 
 
    <img src="https://i.vimeocdn.com/portrait/15351700_300x300" /> 
 
    </div> 
 
</div>