                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /網(wǎng)頁簡單布局之結(jié)構(gòu)與表現(xiàn)原則

關(guān)于圖片的大小不是很能理解

img{width:95px;height:95px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px;30px;border:1px solid blue;}

我代碼是這樣寫的,因為剛開始不是很理解,所以自己加了一個邊框,但是做出來之后發(fā)現(xiàn)不管里面的圖片怎么變,但是邊框不變,我試著改了前面的高寬,發(fā)現(xiàn)邊框隨著高寬變化.現(xiàn)在我有點(diǎn)不能理解了.那個高寬到底是圖片的大小還是什么的大小,黑框框住的是什么區(qū)域,為什么框住的既不是img層也不是img里的圖片,求解.

慕仰5293895

2016-09-10

源自：網(wǎng)頁簡單布局之結(jié)構(gòu)與表現(xiàn)原則 3-3

關(guān)注問題我要回答

1189

操作

收起

3 回答

我要開發(fā)地圖系統(tǒng) 回答被采納 +3 積分
2016-09-10

1、寬高就是用來設(shè)置圖片的寬高的，無論圖片原本的大小是多少，都會變成這里設(shè)定的大小，如果寬高的比例和圖片本身的比例不一樣，就會使圖片變形，讓圖片來適應(yīng)這個寬高。當(dāng)然，你也可以把這個寬高去掉，這樣圖片就會按本身的大小來顯示了，你也可以只設(shè)定寬或者高，看看有什么不一樣的地方，保證你會有收獲的。

2、你現(xiàn)在遇到的問題其實是，設(shè)置了padding的原因，導(dǎo)致圖片的邊緣與邊框有了距離所致，你可以將padding刪了，就能看到邊框與圖片的大小一致了。padding就是內(nèi)邊距，是用來讓內(nèi)容和邊框之前產(chǎn)生距離的，而margin是用來讓元素之間產(chǎn)生距離的，讓它們看起不那么擁擠。

3、那老師為什么要設(shè)置padding呢？

? ? ? 可能是，背景比較大，為了讓背景完全呈現(xiàn)出來而設(shè)置的。

2 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕仰5293895 提問者

你的意思就是邊框框住的其實就是裝圖片的盒子,而padding設(shè)置的就是圖片距離盒子的內(nèi)邊距,所以才會和邊框有了間距.不過我不明白,我是把邊框?qū)懺趇mg里的,框住的不應(yīng)該是img嗎,還是說,img就是盒子,里面裝的是圖片,這樣的話邊框就是框住的就是img,也就能解釋了.不過我在img里設(shè)置了高寬為什么改變的是圖片的大小,不應(yīng)該改變的是img這個盒子的大小嗎

2016-09-10 回復(fù) 有任何疑惑可以回復(fù)我~

#2

我要開發(fā)地圖系統(tǒng)

是的。 1、img本身就是一個元素，也就是傳說中的盒子，它也是具有盒子的各種特性的； 2、img這個盒子是專門用來裝圖片的，它除了盒子的普通特性，還有一個特別的特性——使圖片變得和它的大小一樣，也可以說是變形； 3、如果你給加上別的盒子屬性，也會生效的，比如內(nèi)邊距（padding）就是這樣，除了內(nèi)邊距占據(jù)的空間，剩下的空間，還是會使圖片變形的。

2016-09-11 回復(fù) 有任何疑惑可以回復(fù)我~

#3

我要開發(fā)地圖系統(tǒng) 回復(fù) 慕仰5293895 提問者

總之，它會讓圖片充滿它的內(nèi)部空間。不過，實際上，沒有人會像都老師這樣用，大多時候是使用圖片的原大小，也就是根據(jù)空間的大小來制作同樣大小的圖片。當(dāng)然，在手機(jī)網(wǎng)站上也有會使用2倍大小的圖片，因為手機(jī)屏幕的原因會產(chǎn)生放大效果而導(dǎo)致圖片顯示模糊。

2016-09-11 回復(fù) 有任何疑惑可以回復(fù)我~