圖片樣式的使用-CSS入門基礎（016）
阿新 • • 發佈：2020-12-19
今天我們分享關於圖片樣式的內容。
在css中，對於圖片的大小，我們使用width和height兩個屬性來定義。
語法：
width:畫素值；height:畫素值；
示例程式碼：
<html><head><title>圖片大小</title><styletype="text/css">img { width:100px;height:80px;}</style></head><body><imgsrc="images/1.jpg" alt=""></body></html>
圖片的實際大小與設定大小不是正相關的，也就是圖片在Photoshop中的寬度高度，在設定網頁寬度高度時，可以參考，但是不用嚴格遵守，我們設定圖片的寬度和高度，目標是為了讓圖片在網頁中呈現出想要的效果。
圖片邊框border：
語法：
border-width:畫素值；border-style:屬性值；border-color:顏色值；
這個邊框和元素邊框是一樣的，比較常用的是簡潔寫法。
示例程式碼：
<html><head><title>圖片邊框</title><style type="text/css">img{width:100px;height:80px;border-width:1px;border-style:solid;border-color:red;}</style></head><body><imgsrc="images/1.jpg"alt=""></body></html>
如果我們在圖片的邊框上加hover的效果，
<html><head><title>加hover</title><style type="text/css">img{width:100px;height:80px;border:1px solid blue;}img:hover{ border:1px solid green;}</style></head><body><imgsrc="images/1.jpg" alt=""></body></html>
圖片水平對齊：
在文字中需要水平對齊時，使用text-align屬性，在圖片的水平對齊，也可以使用text-align，一樣的效果。
語法：
text-align:屬性值；| text-align屬性取值 | |
| 屬性值 | 說明 |
| left | 左對齊，預設值 |
| center | 居中對齊 |
| right | 右對齊 |
示例程式碼：
<html><head><title>圖片水平對齊</title><styletype="text/css">div{width:600px;height:100px;border: 1px solid black;margin-bottom:20px;}img{width:80px;height:50px;}#d1 {text-align:right;}#d2 { text-align:center;}#d3 { text-align:left;}</style></head><body><div id="d1"><imgsrc="images/1.jpg"alt=""></div><div id="d2"><imgsrc="images/1.jpg"alt=""></div><div id="d3"><imgsrc="images/1.jpg"alt=""></div></body></html>
以上程式碼就是圖片的水平對齊方式，很多初學者會有疑問，認為定義圖片的水平對齊，肯定是針對img標籤來設定的，其實呢，是需要對圖片所在的父元素進行水平對齊的。
圖片垂直對齊：
如果我想要圖片能夠垂直對齊，應該怎麼做呢？在css中，我們可以使用vertical-align屬性來定義垂直對齊方式的。
語法：
vertical-align:屬性值；| vertical-align屬性取值 | |
| 屬性值 | 說明 |
| top | 頂部對齊 |
| middle | 中部對齊 |
| baseline | 基線對齊 |
| bottom | 底部對齊 |
示例程式碼：
<html><head><title>垂直對齊方式</title><style type="text/css">#dv1{width:600px;height:600px;border:1pxsolidblack;text-align:center;}img { width:80px;height:80px;}#img1{vertical-align:top;}#img2{vertical-align:middle;}#img3 { vertical-align:bottom;}#img4{vertical-align:baseline;}</style></head><body><divid="dv1"><img id="img1" src="images/1.jpg" alt="">方式：top<hr><img id="img2" src="images/1.jpg" alt="">方式：middle<hr><img id="img3" src="images/1.jpg" alt="">方式：bottom<hr><img id="img4" src="images/1.jpg" alt="">方式：baseline<hr></div></body></html>
預覽瀏覽器效果後，大家有疑問了，不是說圖片對齊方式嗎？沒看到圖片垂直對齊改變啊。這個就是誤解了vertical-align屬性的含義了。
它負責定義的是行內元素相對於該元素的垂直對齊方式。也就是上面程式碼中圖片與文字的對齊方式。這個大家自己理解一下，消化一下。
