                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

关于图片的大小不是很能理解

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

我代码是这样写的,因为刚开始不是很理解,所以自己加了一个边框,但是做出来之后发现不管里面的图片怎么变,但是边框不变,我试着改了前面的高宽,发现边框随着高宽变化.现在我有点不能理解了.那个高宽到底是图片的大小还是什么的大小,黑框框住的是什么区域,为什么框住的既不是img层也不是img里的图片,求解.

慕仰5293895

2016-09-10

源自：网页简单布局之结构与表现原则 3-3

关注问题我要回答

1162

操作

收起

3 回答

我要开发地图系统回答被采纳 +3 积分
2016-09-10

1、宽高就是用来设置图片的宽高的，无论图片原本的大小是多少，都会变成这里设定的大小，如果宽高的比例和图片本身的比例不一样，就会使图片变形，让图片来适应这个宽高。当然，你也可以把这个宽高去掉，这样图片就会按本身的大小来显示了，你也可以只设定宽或者高，看看有什么不一样的地方，保证你会有收获的。

2、你现在遇到的问题其实是，设置了padding的原因，导致图片的边缘与边框有了距离所致，你可以将padding删了，就能看到边框与图片的大小一致了。padding就是内边距，是用来让内容和边框之前产生距离的，而margin是用来让元素之间产生距离的，让它们看起不那么拥挤。

3、那老师为什么要设置padding呢？

可能是，背景比较大，为了让背景完全呈现出来而设置的。

2 回复有任何疑惑可以回复我~

收起回答

慕仰5293895 提问者

你的意思就是边框框住的其实就是装图片的盒子,而padding设置的就是图片距离盒子的内边距,所以才会和边框有了间距.不过我不明白,我是把边框写在img里的,框住的不应该是img吗,还是说,img就是盒子,里面装的是图片,这样的话边框就是框住的就是img,也就能解释了.不过我在img里设置了高宽为什么改变的是图片的大小,不应该改变的是img这个盒子的大小吗

2016-09-10 回复有任何疑惑可以回复我~

我要开发地图系统

是的。 1、img本身就是一个元素，也就是传说中的盒子，它也是具有盒子的各种特性的； 2、img这个盒子是专门用来装图片的，它除了盒子的普通特性，还有一个特别的特性——使图片变得和它的大小一样，也可以说是变形； 3、如果你给加上别的盒子属性，也会生效的，比如内边距（padding）就是这样，除了内边距占据的空间，剩下的空间，还是会使图片变形的。

2016-09-11 回复有任何疑惑可以回复我~

我要开发地图系统回复慕仰5293895 提问者

总之，它会让图片充满它的内部空间。不过，实际上，没有人会像都老师这样用，大多时候是使用图片的原大小，也就是根据空间的大小来制作同样大小的图片。当然，在手机网站上也有会使用2倍大小的图片，因为手机屏幕的原因会产生放大效果而导致图片显示模糊。

2016-09-11 回复有任何疑惑可以回复我~