Question

在这个简单的布局中，我很难确定高度的额外像素来自哪个div。我的期望是图像将决定div的高度，但它似乎是几个像素更大。我试图摆脱的像素以蓝色显示。有什么想法吗？

哦，我添加了一个按钮，使用javascript正确显式设置图像父div的高度 - 我的问题是它真正从哪里获得额外的高度，或者如何在没有javascript的情况下执行此操作？

function change() {
  var image = document.getElementById('image1ID');
  var width = image.naturalWidth;
  var height = image.naturalHeight;
  var imageDIV = document.getElementById('image1DIV');

  imageDIV.style.height = (100 * height / width) + "px";

}

<div id="image1DIV" style="background-color:#00f;">
  <img id="image1ID" style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg">
</div>

<button onclick="change()">change height of parent div</button>

Answer 1

将vertical-align:middle添加到您的img代码中。它消除了额外的空间。

＆＃13;

function change() {
  var image = document.getElementById('image1ID');
  var width = image.naturalWidth;
  var height = image.naturalHeight;
  var imageDIV = document.getElementById('image1DIV');

  imageDIV.style.height = (100 * height / width) + "px";

}

＆＃13;

#image1ID {
  vertical-align: middle;
}

＆＃13;

<div id="image1DIV" style="background-color:#00f;">
  <img id="image1ID" style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg">
</div>

<button onclick="change()">change height of parent div</button>

＆＃13;

Answer 2

img标记高度未明确设置为占据其父级的100％高度。你看到的是在父母

上设计的背景颜色的一部分

.flexrow img{
      height:100%;
    }

下面的代码段

.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: none;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.textblock {
  width: 170px;
}

.flexrow img {
  height: 100%;
}

<div class="flexcolumn">

  <div class="flexrow">
    <div style="background-color:#00f;">
      <img style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg">
    </div>
    <div class="flexcolumn textblock" style="background-color:#eee;">
      <div style="background-color:#e0e;">Title is here</div>
      <div style="background-color:#0ee;">Description is here</div>
    </div>
  </div>

  <div class="flexrow">
    <div style="background-color:#0f0;">
      <img style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg">
    </div>
    <div class="flexcolumn textblock" style="background-color:#ee0;">
      <div style="background-color:#e0e;">Title is here</div>
      <div style="background-color:#0ee;">Description is here</div>
    </div>
  </div>

</div>

使用img的简单div中的额外高度像素

2 个答案: