css - 在 flex box 中保持图像纵横比

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>

这是我正在尝试做的一个例子。我认为 flex box 可以解决这个问题，我只是遇到了一点麻烦。

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

Answer 1

您需要将图像放入另一个容器中，这样它的固有尺寸才不会受到影响。

.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>