溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹img元素能不能用css，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
img元素可以用css設置樣式，其設置方法：1、通過css width等屬性設置img的尺寸；2、使用CSS的border屬性給img圖片加邊框；3、通過設置a標簽將圖片設置為鏈接；4、使用text-align屬性設置圖片水平對齊方式等。
一、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圖片作為鏈接
圖片作為鏈接，也就是將其置于<a>之內。
代碼實例如下：
<!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>上述代碼將圖片放入鏈接<a>中，點擊可以實現跳轉動作。
需要特別注意的是，將圖片放入鏈接之中，圖片可能會出現不必要的邊框，添加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”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
