html - 使用框大小调整添加边框时防止高度变化

Question

我无法找到描述此问题的内容，但如果我找不到它，请告诉我。

下面是一个演示(在 IE11 和 Chrome 中测试)，完美地展示了问题

本质上，我试图向元素添加边框，并保持大小相同。它对于宽度来说工作得很好，但是对于高度来说，它只容纳了一半，所以我有额外的 3px 高度。

有没有办法在不使用脚本的情况下防止这种情况/绕过它？我可以专门对有边框的元素进行更改，但是我不知道实际高度(此处使用 200px 仅用于演示目的，因此简单地减小高度是不行的一个选项。

谢谢。

编辑(因为显然不清楚我在问什么)

有没有办法在不使用脚本的情况下防止高度变化？

演示:

div {
  width: 200px;
  float: left;
  margin-right: 3px;
}
div img {
  max-width: 100%;
  max-height: 100%;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
}

<div id="div1">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
  <img src="http://placehold.it/200x200" alt="" />
</div>

Answer 1

如果.div没有文本，您可以设置添加line-height:0px，因为图像是它添加的inline-block元素空白

div {
  width: 200px;
  float: left;
  margin-right: 3px;
}
div img {
  max-width: 100%;
  max-height: 100%;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
  line-height:0px;
}

<div id="div1">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
  <img src="http://placehold.it/200x200" alt="" />
</div>