色卡网站免费大全,91精品国产闺蜜国产在线,欧美伊香蕉久久综合网99

技術頻道 - html技術

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

作者:admin 時間:2023-5-12 21:22:48 瀏覽:

很多應用場景都需要在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>