img元素能不能用css

發(fā)布時(shí)間：2021-01-11 13:58:58 來源：億速云閱讀：155 作者：小新欄目：web開發(fā)

這篇文章主要介紹img元素能不能用css，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

img元素可以用css設(shè)置樣式，其設(shè)置方法：1、通過css width等屬性設(shè)置img的尺寸；2、使用CSS的border屬性給img圖片加邊框；3、通過設(shè)置a標(biāo)簽將圖片設(shè)置為鏈接；4、使用text-align屬性設(shè)置圖片水平對(duì)齊方式等。

一、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>

上述代碼設(shè)置img圖片長寬分別為120px與100px。

但是需要注意的是，使用css粗暴的設(shè)置圖片尺寸可能會(huì)導(dǎo)致變形。

如果不希望圖片變形，主要注意圖片的長寬比例。

二、給img圖片加邊框

實(shí)際應(yīng)用中，可能會(huì)給圖片添加邊框效果。

使用CSS的border屬性即可實(shí)現(xiàn)。

代碼實(shí)例如下：

<!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圖片添加了一個(gè)寬度為2px的藍(lán)色邊框。

關(guān)于border邊框的更多內(nèi)容可以參閱CSS border邊框一章節(jié)。

三、img圖片作為鏈接

圖片作為鏈接，也就是將其置于<a>之內(nèi)。

代碼實(shí)例如下：

<!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>中，點(diǎn)擊可以實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)作。

需要特別注意的是，將圖片放入鏈接之中，圖片可能會(huì)出現(xiàn)不必要的邊框，添加border:none即可。

四、設(shè)置圖片水平對(duì)齊方式

僅以設(shè)置圖片水平居中對(duì)齊為例子，代碼實(shí)例如下：

<!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屬性可以實(shí)現(xiàn)設(shè)置圖片水平對(duì)齊方式的功能。

需要注意的是，此屬性是設(shè)置在圖片的容器元素智商，而不是圖片元素本身。

五、設(shè)置圖片垂直對(duì)齊

下面以一個(gè)常見的代碼作為演示。

文本框與驗(yàn)證碼通常要水平對(duì)齊，這樣比較美觀。

代碼實(shí)例如下：

<!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>

上面代碼可以實(shí)現(xiàn)文本框與驗(yàn)證碼的垂直對(duì)齊效果。

核心代碼如下：

div img{ 
  vertical-align:middle
}

上述代碼要設(shè)置在圖片元素本身之上。

以上是“img元素能不能用css”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

img元素能不能用css

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽