css如何控制圖片寬度
- 青灯夜游原創
- 2021-02-24 11:50:124608瀏覽
在css中，如果是img圖片，可以使用width屬性來控制圖片寬度，例如「img{width:100px;}」；如果是背景圖片，則使用background-size屬性來控制圖片寬度，語法“background-size:寬度高度;”。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、使用img圖片--使用width屬性
標籤定義 HTML 頁面中的圖片。而width屬性設定元素的寬度。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.img2{
width: 200px;
}
</style>
</head>
<body>
<p>
原始尺寸：<img src="img/2.jpg" alt="css如何控制圖片寬度" >
</p>
<p>
修改后的尺寸：<img class="img2" src="img/2.jpg" alt="css如何控制圖片寬度" >
</p>
</body>
</html>效果圖：
#【推薦教學：CSS影片教學 】
2、背景圖片--使用background-size屬性
background-size屬性指定背景圖片大小。
語法
background-size: length|percentage|cover|contain;
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/1.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<br /><br />
<p>原始图片: <br />
<img src="img/1.jpg" alt="Flowers" width="224" style="max-width:90%">
</p>
</body>
</html>效果圖：
程式設計入門！ ！
以上是css如何控制圖片寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼把字體顏色改為白色下一篇：css怎麼把字體顏色改為白色