css 背景圖不拉伸自適應屏幕大小

時間 2019-11-11

標籤 css 背景拉伸自適應屏幕大小欄目 CSS 简体版

原文原文鏈接

效果圖 css

全屏： html

背景圖尺寸大於屏幕尺寸，背景圖只顯示跟屏幕同樣大小內容 api

小屏時：瀏覽器

如效果圖所示，圖片並無發生壓縮、或者縮小比例，它只是顯示跟屏幕尺寸大小的內容，至於如何控制縮小瀏覽器時圖片的變化，能夠使用css的測試

background-position:

屬性來進行控制，它的部分可選參數值以下： url

詳細參數可自行查看api文檔。 spa

下面貼上代碼 code

主要html代碼： htm

<body>
        <div style="
             background: url('img/failure.jpg') no-repeat center center;
             width: 100%;
             height: 100%;
             position: fixed;
">
        </div>
</body>

使用position:fixed以後就能夠經過設置width和height來控制div的寬高度了。圖片

background: url('img/failure.jpg') no-repeat center center;

後面的no-repeat 代表圖片文件不重複平鋪，後面的center center表示當屏幕縮小時，圖片在水平方向和垂直方向都居中顯示。

頁面的其餘內容就能夠所有都寫在上面的div中了，不過這代碼有些問題，由於最外層div已經使用了fix定位，已經脫離了文檔流，若是有其餘元素使用相對定位或者絕對定位會不會受到影響，我還沒測試到。若是有更好的方法能夠實現圖片自適應屏幕的功能，請你們多多指教。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。