HTML img拼接，使圖像無邊框，無邊距

我想縫合一堆圖像使用HTML，但問題是他們有保證金，我使用網絡檢查器來尋找影響這個屬性，但一小時或更少仍然不能弄明白。HTML img拼接，使圖像無邊框，無邊距

我已經嘗試使用負餘量左，負位置使用psuedo選擇器，雖然它工作完美，但這不是正確的方式？

https://dl.dropbox.com/u/2321732/stitch_images/index.html

所以現在我想最乾淨的方式縫合使圖像沒有任何餘量。

來源

2013-01-02 Kent Liau

使用CSS的是不是一種選擇？ –

是的使用CSS，我想要一個非常乾淨的方式使它 –

添加以下內容：

body { 
    font-size: 0; 
}

這是因爲在你的源代碼，其瀏覽器呈現爲空格的新線。

上面的代碼可以防止空格被渲染，但是你也可以從源代碼中刪除換行符（因此標籤全部在一行上）。

來源

2013-01-02 10:20:22 Chris

是的，它的工作，我必須這樣編碼，使一個乾淨的HTML，因爲它包含千張小圖像必須縫在一起 –

@KentLiau真棒！很高興幫助。 – Chris

寫的IMG標籤在一行

<img src="images/0_0.jpg" alt=""><img src="images/1_0.jpg" alt=""><img src="images/2_0.jpg" alt=""> 
    <br> 

    <img src="images/0_1.jpg" alt=""><img src="images/1_1.jpg" alt=""><img src="images/2_1.jpg" alt=""> 
    <br> 

    <img src="images/0_2.jpg" alt=""><img src="images/1_2.jpg" alt=""><img src="images/2_2.jpg" alt="">

來源

2013-01-02 10:21:51 Marv

是的，有點重複。 – Chris

呃，沒有。這是另一個解決方案的過程。 – Marv

這種方法會導致html代碼很長，因爲我會拼接43x33的小圖片來形成大圖片，如果使用這種方式我的html會很寬的 –

設置你的圖像display: block; float: left和您的BR float: left; clear: right

來源

2013-01-02 10:23:06 scoota269

，但應該清楚：左邊還有^^^ –

Abody97的解決方案可能會造成問題，如果你正在使用EM的作爲尺寸單位。將所有內容寫入一行會使閱讀變得更加困難。
您可以改爲將圖像float: left並將overflow: hidden設置爲父元素。
但是，如果出於某種原因，你不能浮動，你可以使用註釋元素，就像這樣：

<div> 
    <img src="1.jpg" alt=""><!-- 
--><img src="2.jpg" alt=""><!-- 
--><img src="3.jpg" alt=""> 
</div>

來源

2013-01-02 17:52:11

HTML img拼接，使圖像無邊框，無邊距

回答

相關問題