css如何使圖片縮小
- WBOY原創
- 2021-11-25 16:17:0121440瀏覽
方法：1、利用width和height屬性使圖片縮小，語法「圖片物件{width:寬度;height:高度;}」；2、利用「background-size」屬性使圖片縮小，語法「圖片物件{background-size:寬度高度;}」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css如何讓圖片縮小
1、在css中，我們可以透過width和height屬性設定圖片的高和寬來設定圖片大小，來達到圖片縮小的目的。
下面我們透過範例來看一下，範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div><img src="1118.02.png" alt="css如何使圖片縮小" ><br>
</div>
<br />
<p><strong>通过CSS使图片缩小</strong></p>
<div>
<img src="1118.02.png" class="img" alt="css如何使圖片縮小" ><br>
</div>
</body>
</html>輸出結果：
2、在css中可以利用background-size屬性來實現圖片縮小，下面我們透過範例來看：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 320px;
}
.box1{
background:url(1118.02.png) no-repeat;
}
.box2{
background:url(1118.02.png) no-repeat;
background-size: 200px 160px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div class="box1"></div>
<br />
<p><strong>通过CSS缩小背景图片</strong></p>
<div class="box2"></div>
</body>
</html>輸出結果：
css影片教學）
以上是css如何使圖片縮小的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn