css如何設置圖片拉伸

這篇文章主要介紹了css如何設置圖片拉伸，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

css設置圖片拉伸的方法：首先創建一個html頁面；然后HTML頁面中添加一個div標簽，并在標簽內部添加一個img圖片標簽；接著在div的標簽中，直接書寫css的樣式；最后對圖片設置高寬都是100%即可。

打開vscode，創建一個html頁面，用于演示css如何根據分辨率拉伸圖片的設置。如果您沒有vscode，使用其他html編輯器，甚至是文本文件都可以，只需要注意文件的后綴必須是.html

在測試頁面的同級目錄，添加一張演示圖片，此處為了演示效果，圖片的分辨率比較小

在測試頁面中添加一個div標簽，在標簽內部添加一個img圖片標簽，設置圖片的src地址為上一步添加的演示圖片，在瀏覽器中打開這個測試頁面，就可以看到圖片呈現在了瀏覽器上

在div的標簽中，直接書寫css的樣式，設置div的寬度為500像素，高度為300像素，邊框為1像素的紅色框。再次在瀏覽器中打開，就可以看到圖片，并沒有填滿整個div的空間

注意：此處直接將css樣式寫到標簽中，叫做內聯樣式，與寫到外面的css效果一樣的

這個時候，想要讓圖片充滿整個div，只需要對圖片設置高寬都是100%即可。此處為了演示，將所有的img標簽都設置成了100%，而且，使用的是外部css的書寫形式。從瀏覽器的展示效果，可以看出圖片拉伸，并填滿了整個div空間

如果圖片使用的是背景圖，不是img標簽的形式呢？如果所示，圖片默認會在x和y軸重復，并不會拉伸，最終仍然填滿了這個div的空間

如果想要背景圖也拉伸填滿整個div空間，就需要設置背景圖的

background-size: 100% 100%;  從運行效果可以看出，確實實現了根據分辨率自動拉伸的效果

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css如何設置圖片拉伸”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!