Question

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

下面是一个演示（在IE11和Chrome中测试），它完美地显示了问题

基本上，我试图为元素添加边框，并保持大小相同。它适用于宽度，但高度，它只能容纳一半，所以我的高度是3px。

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

感谢。

编辑（因为显然我不清楚我在问什么）

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

样本：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果line-height:0px没有文字，您可以设置添加.div，因为图片是inline-block元素，它会添加空格

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

以下是解决方案的变体：

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

Answer 3

将@titorino建议的行高属性添加到div，或将vertical-align: middle添加到img。两者都将解决inline-block

的空白问题

div img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
  line-height:0px;
}

使用box-sizing添加边框时防止高度更改

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

3 个答案: