超过div表格单元格高度的图像

我想将图像放入div（显示：表格单元格）。宽度永远不会超过div的宽度，但高度总是如此。虽然我认为在IE 11中工作正常，因为表的整体大小是完全正确的。但在Chrome中，计算出的高度为9.297px;在Firefox中，计算出来的高度是10.5px。 CSS中的div 的指定宽度和单元格为9像素乘9像素。正如你从下面的代码可以看到它是一个表格结构，但在divs。我已经玩了很多年了，但是我不能完全使用它。要清楚，高度不能超过9个像素。超过div表格单元格高度的图像

我只是想知道是否有人有任何想法让它工作。正如我所说，我认为它在IE中工作，而不是其他人。

我已经包含此JSFiddle - https://jsfiddle.net/eermepfe/。这不是我桌子的确切副本。我有这么多的单元格在jsfiddle中看起来很荒谬。此外，小提琴的高度拉伸比我自己的大巴结果还要糟糕。它仍然会解决问题。

感谢您的帮助

<div id = "table"> 

<div class = "row"> 

<div class = "inner"> 

<img src = "image.png"> 

</div> 

</div> 


</div>

有许多行和每行很多的div，但他们按照上面的设置。

CSS 

#table{ 
display: table; 
table-layout: fixed; 
height: 700px; 
width: 1200px; 
} 

.row{ 
display:table-row; 
} 

.inner{ 
text-align: center; 
line-height: 9px; 
display: table-cell; 
background-color: red; 
height: 9px !important; 
width: 9px; 
border-top: 1px solid black; 
border-right: 1px solid black; 
} 

img{ 
height: auto; 
max-width: 9px; 
vertical-align: middle; 
display: block; 
}

来源

2017-08-12 user1849962

您是否尝试过加入'#table IMG {最大高度：9px; ''以及？ – Prajjwal

是啊哈哈。它不起作用 – user1849962

这种风格加入.inner元素

.inner{ 
    box-sizing:border-box; 
    display:flex; 
    align-items:flex-start; 
}

编辑，请尝试以下方式：

.table{ 
    width:100%; 
} 
.row{ 
    display:flex; 
} 
.inner{ 
    box-sizing:border-box; 
}

来源

2017-08-12 13:10:27

如果你这样做，整个表消失lol – user1849962

这在Firefox和Chrome中很好 - 但除了我的CSS规则 - 不知道你的意思。它现在使IE11在单元格宽度方面变得很奇怪。你认为有一个交叉解决方案的解决方案，或者我将不得不使用JavaScript，并采取每种方式考虑到每个大桥？ – user1849962

你有试过吗？ '* {box-sizing：border-box}'只。它必须跨浏览器工作。而且我看到.inner元素的高度不能达到9px。忽略我以前给过的风格。只是广告*样式 –

超过div表格单元格高度的图像

回答

相关问题