如何在 HTML DIV 區塊內插入圖片

HTML DIV 區塊本身是一個容器的概念，除了可以在 DIV 內放置文字、表格這些網頁元素之外，放圖片也是非常普遍的做法，利用 DIV 區塊內插入圖片的優點除了可以替圖片本身增加更多 CSS 的效果之外，還可以用來做整個網頁的圖片排版，本篇著重於在 HTML DIV 區塊內插入圖片，範例中會提供幾個不同的樣式效果，讓各位看得更清楚些。

HTML DIV 區塊內插入圖片語法
<div style=""><img src="圖片網址"></div>
其實要在 HTML 的 DIV 區塊內插入圖片就像上述的語法那樣簡單，在整個 DIV 區塊內直接使用 HTML 的 <img> 標籤就能輕鬆將圖片插入 DIV 區塊裡，而且不限插入的數量，換句話說，你可以在一個 HTML DIV 區塊內放置一個以上的圖片，而且還可以套用不同的 CSS 樣式創造更豐富的呈現效果，接著我們來看幾個簡單的範例。

HTML DIV 區塊內插入圖片範例
<div style="border:2px red solid;"><img src="範例圖片網址"></div>
<div style="border:2px green solid;padding:5px;text-align:center;"><img src="範例圖片網址"></div>
<div style="border:2px orange dashed;text-align:right;"><img src="範例圖片網址"></div>
範例的輸出結果
範例中我們總共準備了三個不同的 DIV 區塊，每個區塊內都有放置一張範例圖片，然後利用不同的 CSS 語法創造出不同的樣式效果，最上面的一個 DIV 區塊，我們使用了粗體的紅色邊框，接著中間的綠色邊框 DIV 區塊，除了把邊框顏色改成綠色的之外，還套用的內距 padding 屬性，讓邊框與範例圖片之間有一個距離出現，同時加入了 text-align 屬性讓圖片置中，最後一個橘色虛線的 DIV 區塊則套用了 text-align:right 的屬性效果，讓範例圖片靠右邊對齊，CSS 好玩又有趣的地方就在這裡，在傳統的 HTML 設計手法中，要創造出這些效果也是可以，不過語法會比較麻煩，寫起來比較花時間，而且維護或修改上都沒有 CSS 來得便利，今天我們介紹的在 HTML DIV 區塊內插入圖片的技巧，各位可以自己嘗試練習看看。

延伸閱讀
© Copyright webtech.tw Since 2010