超過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表格單元格高度的圖像

回答

相關問題