Html 铬合金中未遵守图像%高度尺寸

我在

td

中设置了

img

，宽度和高度都设置为

100%

。在Chrome中，遵守

宽度

，但不遵守

高度

。在所有其他浏览器中，它似乎都能正常工作

不知道为什么

div
{
背景色：红色；
宽度：100px；
高度：100px；
}
桌子
{
宽度：100%；
身高：100%；
}
img
{
宽度：100%；
身高：100%；
}

---

您应该设置最大高度或最大宽度，以避免内部元素延伸到外部元素之外

HTML

---

请记住删除表格的所有边距和填充。

问题在于表格。图像将其高度设置为其容器的100%，问题是td从图像原始高度（190px）获取其高度。我的建议是把桌子全部扔掉，只需把图像放到div中，它就能完美地工作。否则，您需要将td高度设置为100px

也许这看起来很接近你想要的：

---

作为将来的参考，我可以通过将

img

包装在

div

中来实现它

div.one
{
背景色：红色；
宽度：100px；
高度：100px；
}
桌子
{
宽度：100%；
身高：100%；
}
img
{
宽度：100%；
身高：100%；
}

介意更新这把小提琴来告诉我你的意思吗？我试过你做的，但没用。好的，在小提琴中更新。它需要一个div包装在图像周围。谢谢！实际上，我是通过将

img

包装在

div

中来实现的。很高兴它能有用！请记住把答案标为正确答案。谢谢！这很有帮助。实际上，我是通过将

img

包装在

div

中来实现的。

<div>
    <img src="https://www.google.com/images/srpr/logo11w.png" />
</div>

div
{
    background-color: red;
    max-width: 100px;
    width: 100px;
    max-height: 100px;
    height: 100px;
}

div{
    width: 100px;
    height: 100px;
    background: red;
}

div img{
    width: 100%;
    height: 100%;
    vertical-align:top;
    border: 4px ridge;
    box-sizing: border-box;
}