图片高度与文章标签相同答案

【问题标题】：Image height same as article tag图片高度与文章标签相同
【发布时间】：2020-07-07 06:11:15
【问题描述】：

我有一个出现在文章标签内的图片标签，像这样...

article {
  border: 1px solid;
}

img {
  float: left;
}

<article>
  <h1>Image title</h1>
  Some text here
  <img src="http://placekitten.com/200/300" alt="">
</article>

我希望图像的高度与文章标签中其余内容的高度相同（以便标题的顶部与图像的顶部在同一行，而底部文本与图像底部在同一行）。我尝试在style 中添加height: 100%;，但这没有用。谢谢！

【问题讨论】：

添加你想要的结果图片。这将有助于其他人理解！
@SadiaYounas 在编辑中添加了一张图片
@TannerDolby 我希望图片能解释一下？
文本内容是固定数量，还是您尝试编写无论文章中有多少文本内容都能正常工作的sn-p代码？您确实意识到随着图像高度的增加，其宽度也会增加，因此会减小内容区域的宽度。整篇文章的宽度是固定的吗？请解释更多。
完全错过了使图像高度与文章相同。更新了我的答案。

标签： html css image

【解决方案1】：

这取决于图像的高度。你需要玩弄这些值，才能找到一个好的比率。

article {
  display: flex;
  flex-direction: row;
  border: 1px solid;
}

.article-img {
  width: 6em;
}
.article-img > img {
  width: 100%;
}

.article-details {
  padding-bottom: 2em;
  width: 100%;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<article>
  <div class="article-img"><img src="http://placekitten.com/200/300" alt=""></div>
  <div class="article-details">
    <div><h1>Image title</h1></div>
    <div>Some text here</div>
  </div>
</article>

【讨论】：

你运行你的 sn-p 了吗？结果不是 OP 想要的。
仍然不是他想要的。
保持冷静。它仍在进行中：D
不要提供“仍在进行中”的答案
其实我只是想点击“运行代码sn-p”却不小心点击了接听按钮，两个都是蓝色的。随着大脑的思考，手移动得更快，hups :D

【解决方案2】：

为文章提供高度或最大高度，并使图像相对于文章的高度和最大高度为 100%。如果文章没有指定高度，文章会拉伸到图片的大小，如果更大。

此外，浮动还有一些问题需要解决。对文章应用“clear fix”方法，将 h1 和 text 包裹在一个 div 中，并将 div 浮动到图片旁边。

article {
  height: 150px;
  border: 1px solid;
  position: relative;
}

article:after {
  content: " ";
  display: block;
  clear: both;
}

img {
  float: left;
  position: relative;
  height: 100%;
  max-height: 100%;
}

div {
  float: left;
}

<article>
  <img src="http://placekitten.com/200/300" alt="">
  <div>
    <h1>Image title</h1>
    <p>Some text here</p>
  </div>
</article>

【讨论】：