css如何設(shè)置圖片拉伸

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

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

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

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

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

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

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

注意：此處直接將css樣式寫到標(biāo)簽中，叫做內(nèi)聯(lián)樣式，與寫到外面的css效果一樣的

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

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

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

background-size: 100% 100%;  從運(yùn)行效果可以看出，確實(shí)實(shí)現(xiàn)了根據(jù)分辨率自動拉伸的效果

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