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

成都創(chuàng)新互聯(lián)服務項目包括崆峒網(wǎng)站建設、崆峒網(wǎng)站制作、崆峒網(wǎng)頁制作以及崆峒網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，崆峒網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到崆峒省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

一、CSS控制img圖片的尺寸

 
img{
  width:120px;
  height:100px;
}
 
 
 

 

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

但是需要注意的是，使用css粗暴的設置圖片尺寸可能會導致變形。

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

二、給img圖片加邊框

實際應用中，可能會給圖片添加邊框效果。

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

代碼實例如下：

 
img{
    width:220px;
    height:100px;
    border:2px solid blue;
}
 
 
 

 

上面代碼為img圖片添加了一個寬度為2px的藍色邊框。

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

三、img圖片作為鏈接

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

代碼實例如下：

 
img{
    width:40px;
    height:20px;
    border:2px solid blue;
    border:none;
}
 
 
 
>
 

上述代碼將圖片放入鏈接中，點擊可以實現(xiàn)跳轉(zhuǎn)動作。

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

四、設置圖片水平對齊方式

僅以設置圖片水平居中對齊為例子，代碼實例如下：

 
div{
  width:300px;
  height:300px;
  text-align:center;
  background-color:#ccc;
}
img{
  width:100px;
  height:100px;
}
 
 
 

 

使用text-align屬性可以實現(xiàn)設置圖片水平對齊方式的功能。

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

五、設置圖片垂直對齊

下面以一個常見的代碼作為演示。

文本框與驗證碼通常要水平對齊，這樣比較美觀。

代碼實例如下：

div img{ 
  vertical-align:middle
}
input{
  height:52px;
}

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

核心代碼如下：

div img{ 
  vertical-align:middle
}

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

以上是“img元素能不能用css”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標題：img元素能不能用css-創(chuàng)新互聯(lián)
當前鏈接：http://weahome.cn/article/dcsssh.html