CSS 設定<img>圖片樣式

admin發表於2018-10-01
原文網址 : https://www.softwhy.com/article-9296-1.html
CSS

關於<img>圖片基本知識可以參閱HTML <img> 元素一章節。

下面介紹一下CSS對於<img>圖片的常見操作。

一.CSS控制圖片尺寸：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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粗暴的設定圖片尺寸可能會導致變形。

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

二.給圖片加邊框：

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

使用CSS的border屬性即可實現。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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邊框一章節。

三.圖片作為連結：

圖片作為連結，也就是將其置於<a>之內。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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即可。

四.設定圖片水平對齊方式：

僅以設定圖片水平居中對齊為例子，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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屬性可以實現設定圖片水平對齊方式的功能。

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

五.設定圖片垂直對齊:

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

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<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>

上面程式碼可以實現文字框與驗證碼的垂直對齊效果。

核心程式碼如下：

[CSS] 純文字檢視 複製程式碼
div img{ 
  vertical-align:middle
}

上述程式碼要設定在圖片元素本身之上。

相關文章