与外部相同的内部 div 图像高度答案

【问题标题】：Same inner div image height as the outer与外部相同的内部 div 图像高度
【发布时间】：2023-03-16 23:22:06
【问题描述】：

我的内部图像应该与外部 div 具有相同的高度。

我的代码是：

<div>
   <div class="col_2_fifth">
      <figure>
         <img src="....." />
      </figure>
   </div>
   <div class="col_3_fifth">
      <div class="description">
          <p>....</p>
      </div>
   </div>
</div>

但图像高度总是小于其父 div 高度。

我现在能做什么？我可以用 jquery/js 或 css 解决这个问题吗？

【问题讨论】：

检查外部 div 是否附加了一些填充？
这个问题在这里已经有了答案stackoverflow.com/a/19193308/4323504
你可以为你的问题创建小提琴吗？
Resize image to 100% height of a div and keep aspect ratio的可能重复

标签： html css

【解决方案1】：

简单地写：

figure img {height:100%:}

【讨论】：

没有任何影响
检查你的<figure>标签是否正在占用高度。如果没有，那么首先给出高度。
当您说“高度为外部”时，您的目标是哪个外部？

【解决方案2】：

<div>
   <div class="col_2_fifth" style='width:20%'>
      <figure>
         <img src="123.jpg-17eqp8a.jpg" width='100%' />
      </figure>
   </div>
   <div class="col_3_fifth">
      <div class="description">
          <p>....</p>
      </div>
   </div>
</div>

试试这个

【讨论】：

【解决方案3】：

你可以添加

img {
  vertical-align: top;
}

【讨论】：

【解决方案4】：

尝试编辑负责col_2_fifth 和col_3_fifth 的css 文件。这将帮助您解决问题。

【讨论】：

【解决方案5】：

.col_2_fifth {
padding : 0px;
margin: 0px;
}

试试这个。

【讨论】：

【解决方案6】：

尝试使用 CSS：

 .col_2_fifth {
      background: url(123.jpg-17eqp8a.jpg);
      background-size: 100% 100%;
 }

这会将图像设置为具有类 col_2_fifth 的 div 的背景

Luthando Loot 评论中的链接是最佳解决方案

【讨论】：

【解决方案7】：

这应该有效：

.col_2_fifth, figure, figure img {
    padding: 0;
    margin: 0;
}

.col_2_fifth, figure img {
    height: 100%;
}

【讨论】：