|
|
|
|
|
很多應(yīng)用場景都需要在DIV
容器里使用背景圖像(background-image
),但可能你遇到一個問題,就是在PC端顯示完整的背景圖像,在移動端里只能顯示一部份,因為超出窗口的那部分圖像被自動裁掉了。其實,這個問題可以輕易解決,本文就教你如何讓DIV
背景圖片隨窗口大小自動縮小放大。
示例
下面示例的代碼,可以讓DIV
背景圖片隨窗口大小自動縮小放大。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
<style type="text/css">
.map {
width:100%;
height:410px;
position: relative;
background-image: url("map.jpg");
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="map"></div>
</body>
</html>
執(zhí)行結(jié)果
請看我的運行效果圖,它是可以隨窗口大小自動縮小放大的。
關(guān)鍵CSS代碼
要DIV
背景圖片隨窗口大小自動縮小放大,CSS需有兩個關(guān)鍵屬性:width
和background-size
。
首先width
屬性值不能是固定值,如800px,而是需要用百分比來表示。
其實是需要一個background-size
屬性,且把其值設(shè)置為contain。
background-size 屬性
CSS background-size
有3個屬性值:auto、contain和cover,參閱下面文章了解這3個值的使用區(qū)別。
總結(jié)
本文介紹了CSS如何讓DIV
背景圖片隨窗口大小自動縮小放大,希望看了本文的朋友能有所收獲。
相關(guān)文章