從HTML瓷磚重新創建圖像

我有一個圖像，我已經分成48塊瓷磚（8x6）使用類似於「Cut an Image into 9 pieces C#」類似的東西。我想發送拼貼作爲原始圖像在html中。從HTML瓷磚重新創建圖像

這樣做的最好方法是什麼？

我首先想到的是使用一個表8列6行，只是在每個單元的瓷磚，所有邊框和間距設置爲0，我使用的答案提供的樣式表How to remove unwanted space between rows and columns in table?

不幸的是，我仍然有行之間的空間。

下面是HTML：

<!DOCTYPE html> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Picture this</title> 
    <link rel="stylesheet" type="text/css" href="Reset.css" /> 
</head> 
<body> 
    <table border="0" cellspacing="0"> 
     <tr class="row"> 
      <td><img id="displayimage0" /></td> 
      <td><img id="displayimage1" /></td> 
      <td><img id="displayimage2" /></td> 
      <td><img id="displayimage3" /></td> 
      <td><img id="displayimage4" /></td> 
      <td><img id="displayimage5" /></td> 
      <td><img id="displayimage6" /></td> 
      <td><img id="displayimage7" /></td> 
     </tr> 
     <tr class="row"> 
      <td><img id="displayimage8" /></td> 
      <td><img id="displayimage9" /></td> 
      <td><img id="displayimage10" /></td> 
      <td><img id="displayimage11" /></td> 
      <td><img id="displayimage12" /></td> 
      <td><img id="displayimage13" /></td> 
      <td><img id="displayimage14" /></td> 
      <td><img id="displayimage15" /></td> 
     </tr> 
    </table>

的CSS是直接從link in the accepted answer。

這裏是輸出（注意行之間的空間的截屏...

enter image description here

來源

2014-11-04 Chad Dienhart

可能應該使用CSS來代替表格，但是您可以通過在table標籤中添加'cellpadding =「0」'來解決您的問題（這是一個來自[這個問題]的幾個較新答案（http： // ST ackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table）暗示） – admdrew 2014-11-04 18:47:53

我加了它，仍然看到空間... ' < table border =「0」cellpadding =「0」> ' – 2014-11-04 18:53:39

它在CSS中看起來像什麼？我的行和列的大小可能會根據所顯示的圖像而改變。 – 2014-11-04 18:55:04

我第一次添加了邊距：0和填充：0到CSS，它沒有工作。然後我試圖通過@admedrew How to remove unwanted space between rows and columns in table?

添加以下的CSS中提供的鏈接工作：

符合標準的HTML5添加所有這個CSS在表中除去圖像之間的所有空間：

td img { 
    display:block; 
}

來源

2014-11-04 19:07:43

只是想知道，你可以標記自己的答案是正確的嗎？ – myfunkyside 2014-11-04 19:12:11

它說我可以在兩天內。感謝pbaldauf，admdrew和myfunkyside發佈的所有信息，希望對您有所幫助。這對我來說是新的，我非常感謝您的意見。 – 2014-11-04 19:17:10

請嘗試以下CSS屬性：

table { 
    border-spacing: 0 !important; //This should normally do the trick 
    margin: 0 !important; 
    padding: 0 !important; 
    border-collapse: collapse !important; 
}

編輯：
你可能會覆蓋一些CSS pro從您的文件中搜索。因此，請嘗試在您的CSS樣式的末尾添加!important。

如果還不能解決問題，檢查你的瓷磚與開發工具看哪個樣式應用於。

來源

2014-11-04 18:55:36 pbaldauf

我試過'！important'標誌，它仍然沒有刪除行之間的空間。我在與評論部分的其中一個鏈接合作後提出了答案。 +1向我展示'！important'國旗 – 2014-11-04 19:18:33

@chaddienhart歡迎您！ – pbaldauf 2014-11-04 19:20:01

從HTML瓷磚重新創建圖像

回答

相關問題