技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

CSS如何讓DIV背景圖片隨窗口大小自動(dòng)縮放【示例】

作者:admin    時(shí)間:2023-5-12 21:22:48    瀏覽:

很多應(yīng)用場(chǎng)景都需要在DIV容器里使用背景圖像（background-image），但可能你遇到一個(gè)問(wèn)題，就是在PC端顯示完整的背景圖像，在移動(dòng)端里只能顯示一部份，因?yàn)槌龃翱诘哪遣糠謭D像被自動(dòng)裁掉了。其實(shí)，這個(gè)問(wèn)題可以輕易解決，本文就教你如何讓DIV背景圖片隨窗口大小自動(dòng)縮小放大。

示例

下面示例的代碼，可以讓DIV背景圖片隨窗口大小自動(dòng)縮小放大。

完整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é)果

請(qǐng)看我的運(yùn)行效果圖，它是可以隨窗口大小自動(dòng)縮小放大的。

 DIV背景圖片隨窗口大小自動(dòng)縮小放大

關(guān)鍵CSS代碼

要DIV背景圖片隨窗口大小自動(dòng)縮小放大，CSS需有兩個(gè)關(guān)鍵屬性：width和background-size。

首先width屬性值不能是固定值，如800px，而是需要用百分比來(lái)表示。

其實(shí)是需要一個(gè)background-size屬性，且把其值設(shè)置為contain。

background-size 屬性

CSS background-size 有3個(gè)屬性值：auto、contain和cover，參閱下面文章了解這3個(gè)值的使用區(qū)別。

總結(jié)

本文介紹了CSS如何讓DIV背景圖片隨窗口大小自動(dòng)縮小放大，希望看了本文的朋友能有所收獲。

相關(guān)文章

x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */