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

您需要将图像放入另一个容器中，以使其内在尺寸不受影响。

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

Answer 2

喜欢这个吗？

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;
}

将图像宽高比保持在弹性框中

2 个答案: