固定高度表，限制表格單元格內的大圖片

我有一張固定高度的表格，裏面有一個表格單元格，圖標圖片需要限制在表格單元格的高度。然而，無論我嘗試過什麼，圖片都會強制展開表格，或者忽略height: 100%。固定高度表，限制表格單元格內的大圖片

這是未修改的JSFiddle與最初的佈局和樣式。

事情我必須基於其他SO答案嘗試：

確保的img所有的父母都有100％的高度（source）：JSFiddle
table-layout:fixed，white-space: nowrap和overflow: hidden（source）：JSFiddle
inner position: absolute div將其從佈局計算中排除（source）：JSFiddle

我寧願沒有手動設置表格單元格高度：

內float: left div來從佈局計算中排除：JSFiddle

更新酒吧：

因此，所有的表內的高度應該是動態的

來源

2015-09-04 woojoo666

發現了一個很酷的文章css flex，原來它更容易使用多列布局不是表。

解決方案是一個圖標

JSFiddle

解決方案在3圖標

.flexcontainer { display: flex; width: 300px; height: 50px; border: 3px solid black } 
 
.column { flex: 1; height: 100%; } 
 
img { height: 100%; width: auto; display: block; margin: auto }

<div class="flexcontainer"> 
 
    <div class="column"> 
 
     <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/> 
 
    </div> 
 
    <div class="column"> 
 
     <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/> 
 
    </div> 
 
    <div class="column"> 
 
     <img src="https://cdn4.iconfinder.com/data/icons/flat-icon-set/2133/flat_icons-graficheria.it-13.png"/> 
 
    </div> 
 
</div>

來源

2015-09-18 11:57:21 woojoo666

是否可以將固定高度賦予td元素而不是表格？像這樣：

table tr td { width: 100px; height: 100px; border: 3px solid black; } 
img { display: block; height: 100%; width: auto; }

http://jsfiddle.net/webmaas/m5wxyv9j/2/

來源

2015-09-04 09:24:37 Patte

是的，我的意思是這正是我試圖避免，因爲桌子高度實際上來自一個容器。我將更新這個問題一點來詳細說明 – woojoo666

爲什麼圖標需要一個表中，如果我可以問嗎？

來源

2015-09-04 10:09:15 Jay

這不是一個真正的答案，我會建議下次再評論時，但我使用表的原因是因爲我需要多個均勻間隔的圖標，並且我認爲最簡單的方法平均空間的東西是與表格佈局 – woojoo666

將更新我的答案與修復或替代方法，一旦我回家:) – Jay

試試這個，它的工作在我結束

img { height: 100%; width: 100%; }

來源

2015-09-04 12:06:05

我使用'width：auto'來保存我的圖像的寬高比。你可以發佈一個JSFiddle鏈接，以便我可以看到整個代碼？ – woojoo666

OP爲什麼要「試試這個」？一個好的答案將總是解釋做了什麼以及爲什麼這樣做，不僅是爲了OP，而且是爲了將來SO的訪問者。 –

固定高度表，限制表格單元格內的大圖片

回答

相關問題