拉伸圖像高度css

我想要兩個圖像來填充單元格。兩者都設置爲100％的寬度，並且水平伸展是完美的。兩者都設置爲50％的高度，一個是完美的，另一個重疊單元格並溢出到它下面的單元格中，因爲它不會伸展到我指定的高度，而是根據寬度成比例的高度。拉伸圖像高度css

http://shears-001-site1.mywindowshosting.com/bet.aspx

如果你看到，底部圖像被泄漏到它下面的單元格。我希望它能很好地適應它所在的單元格，我不在乎它是否看起來很有趣。

編輯：這似乎是問題與使用百分比高度的div。如果使用em或像素，它可以正確縮放，但百分比並且它會變得瘋狂。

來源

2014-02-12 David Shears

你能分享一些代碼？或在jsfiddle？我在想，你的圖像的高度和寬度與單元大小無關。謝謝。 – JunM

PM Logo –

請在我這樣做，其仍然是相同的，因爲它是前兩者之間添加 – Krish

試試這個代碼：

<td style="width: 50%; vertical-align: top;"> 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="width: 100%; height: 100%;"> 
</td>

或CSS

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

enter image description here

來源

2014-02-12 06:30:02 Manoj

現在的單元格仍然存在問題，比指定時間長。我不希望細胞伸展/壓縮，只是圖像。 –

你可以做這樣的事情

Fiddle

td{ 
    border: 1px solid green; 
    position: relative; 
    height: 100px; 
    width: 200px; 
} 

.test{ 
    border-bottom-style: solid; 
    background-color: yellow; 
    width: 100%; 
    height: 50%;  
    position: relative; 
} 

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

來源

2014-02-12 06:36:17 JunM

試過這個和其他建議一樣的問題。細胞被拉伸到適合兩個圖像比例高度的大小，而不是停留在指定的高度並縮小圖像。 –

，我覺得你是在HIGHT thtsŸü[R獲得問題的不同兩個圖像......儘量讓兩個圖像相同的高度和50％的份額都...

來源

2014-02-12 07:30:19 ishvar

什麼是高度屬性的要點，那麼如果我必須走出自己的路，確保每個圖像在文件系統上的像素大小完全相同？ –

如果你想出去，然後在HTML中應用像素高度...我認爲百分比包含一些與圖像在你的情況下的問題....你有兩個選項適用於像素的高度要麼改變文件中的圖像大小 – ishvar

拉伸圖像高度css

回答

相關問題