img元素可以用css設定樣式,其設定方法:1、透過css width等屬性設定img的尺寸;2、使用CSS的border屬性為img圖片加邊框;3、透過設定a標籤將圖片設定為連結;4、使用text-align屬性設定圖片水平對齊方式等。
本教學操作環境:windows7系統、HTML5&&CSS3版本、Dell G3電腦。
推薦:css影片教學
一、CSS控制img圖片的尺寸
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> img{ width:120px; height:100px; } </style> </head> <body> <img src="mytest/div+css/border.jpg"/> </body> </html>
上述程式碼設定img圖片長寬度分別為120px與100px。
但是要注意的是,使用css粗暴的設定圖片尺寸可能會導致變形。
如果不希望圖片變形,主要注意圖片的長寬比例。
二、為img圖片加上邊框
實際應用程式中,可能會為圖片新增邊框效果。
使用CSS的border屬性即可實作。
程式碼實例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> img{ width:220px; height:100px; border:2px solid blue; } </style> </head> <body> <img src="mytest/div+css/border.jpg"/> </body> </html>
上面程式碼為img圖片新增了一個寬度為2px的藍色邊框。
關於border邊框的更多內容可以參考CSS border邊框一章節。
三、img圖片作為鏈接
圖片作為鏈接,也就是將其置於3499910bf9dac5ae3c52d5ede7383485之內。
程式碼實例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> img{ width:40px; height:20px; border:2px solid blue; border:none; } </style> </head> <body> <a href="#"><img src="mytest/div+css/border.jpg"/></a>> </body> </html>
上述程式碼將圖片放入連結3499910bf9dac5ae3c52d5ede7383485中,點擊可以實現跳躍動作。
需要特別注意的是,將圖片放入連結之中,圖片可能會出現不必要的邊框,添加border:none即可。
四、設定圖片水平對齊方式
僅以設定圖片水平居中對齊為例子,程式碼實例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> div{ width:300px; height:300px; text-align:center; background-color:#ccc; } img{ width:100px; height:100px; } </style> </head> <body> <div><img src="mytest/div+css/border.jpg"/></div> </body> </html>
使用text-align屬性可以實現設定圖片水平對齊方式的功能。
要注意的是,此屬性是設定在圖片的容器元素智商,而不是圖片元素本身。
五、設定圖片垂直對齊
以下以常見的程式碼作為示範。
文字方塊與驗證碼通常要水平對齊,這樣比較美觀。
程式碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> div img{ vertical-align:middle } input{ height:52px; } </style> </head> <body> <div><input type="text"/><img src="mytest/demo/1.jpg"></div> </body> </html>
上面程式碼可以實作文字方塊與驗證碼的垂直對齊效果。
核心程式碼如下:
div img{ vertical-align:middle }
上述程式碼要設定在圖片元素本身之上。
以上是img元素可以用css嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!