在進行網頁建造的過程中 ， 圖片和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空間 ， 就需要設置布景圖的
【css 設置圖片根據分辨率拉伸】background-size: 100% 100%; 從運行結果可以看出 ， 確實實現了按照分辯率主動拉伸的結果
以上內容就是css 設置圖片根據分辨率拉伸的內容啦 ， 希望對你有所幫助哦！
猜你喜歡
- 設置Excel單元格顏色以便突出顯示
- 如何利用手機QQ給圖片打馬賽克
- 愛奇藝杜比怎么設置
- 怎樣設置ppt幻燈片切換效果
- PowerPoint中如何設置頁面版式
- Word段前段后間距的設置
- Word如何設置字體效果
- WPS中PPT如何設置背景填充效果？
- 怎樣在Word文檔中設置文本框填充效果
- 如何把圖片設置成四周型環繞？