css 設置圖片根據分辨率拉伸
在進行網頁建造的過程中，圖片和css樣式，是經常利用到的兩種形式。那么，若何經由過程css設置圖片按照分辯率拉伸呢？
東西/原料
- vscode
方式/步調
- 1
打開vscode，建立一個html頁面，用于演示css若何按照分辯率拉伸圖片的設置。若是您沒有vscode，利用其他html編纂器，甚至是文本文件都可以，只需要注重文件的后綴必需是.html
- 2
在測試頁面的同級目次，添加一張演示圖片，此處為了演示結果，圖片的分辯率比力小
- 3
在測試頁面中添加一個div標簽，在標簽內部添加一個img圖片標簽，設置圖片的src地址為上一步添加的演示圖片，在瀏覽器中打開這個測試頁面，就可以看到圖片呈此刻了瀏覽器上
- 4
在div的標簽中，直接書寫css的樣式，設置div的寬度為500像素，高度為300像素，邊框為1像素的紅色框。再次在瀏覽器中打開，就可以看到圖片，并沒有填滿整個div的空間
注重：此處直接將css樣式寫到標簽中，叫做內聯樣式，與寫到外面的css結果一樣的
- 5
這個時辰，想要讓圖片布滿整個div，只需要對圖片設置高寬都是100%即可。此處為了演示，將所有的img標簽都設置當作了100%，并且，利用的是外部css的書寫形式。從瀏覽器的展示結果，可以看出圖片拉伸，并填滿了整個div空間
- 6
若是圖片利用的是布景圖，不是img標簽的形式呢？若是所示，圖片默認會在x和y軸反復，并不會拉伸，最終仍然填滿了這個div的空間
- 7
若是想要布景圖也拉伸填滿整個div空間，就需要設置布景圖的
background-size: 100% 100%; 從運行結果可以看出，確實實現了按照分辯率主動拉伸的結果
- 發表于 2019-06-10 00:38
- 閱讀 ( 823 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章