flexbox 中不考虑图像大小

Question

我有一张图片和文字要垂直对齐：

  <div>
      <img src="xyz.png" style="width:70%;">
      <p>xyz</p>
  </div>

文字漂浮在图片周围。的宽度是内联的，因为它是一个所见即所得的内容字段，我无法控制标记。

现在我想到了通过 flexbox 进行垂直对齐：

div {
  display: flex;
  align-items: center;  
}

瞧瞧。它有效，但不再考虑图像的百分比大小。为什么？另外，这个新的图像尺寸是基于什么？不是百分比也不是原始大小

Codepen Example

.original {
  float: left;
}

img {
  float: left;
  padding: 10px;
}

.vAlign {
  display: flex;
  align-items: center;
}

<h1>Original Markup</h1>
<div class="original">
  <img src="http://via.placeholder.com/350x150" style="width:70%;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p>
</div>


<h1>verticalign (But wrong img Size)</h1>
<div class="vAlign">
  <img src="http://via.placeholder.com/350x150" style="width:70%;">
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>
</div>

Answer 1

弹性容器的初始设置是flex-shrink: 1。这意味着允许弹性项目收缩以避免溢出容器。禁用 flex-shrink.

.original {
  float: left;
}
img {
  float:left;
  padding: 10px;
}
.vAlign {
  display: flex;
  align-items: center;
}

img { flex-shrink: 0; } /* NEW */

<h1>Original Markup</h1>
<div class="original">
<img src="http://via.placeholder.com/350x150" style="width:70%;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd </p>
</div>


<h1>verticalign (But wrong img Size)</h1>
<div class="vAlign">
<img src="http://via.placeholder.com/350x150" style="width:70%;">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>
</div>

还请注意 .

flexbox 中不考虑图像大小

Image size not respected in flexbox

html

css

flexbox

image-resizing