css 图片大小自适应div,css让图片自适应容器（div）大小

咱们在写页面的时候常常会遇到须要图片 自适应 容器大小这样的状况，下面我就开门见山的说明一下怎样去实现这样一个效果。css

1

2

3

备注一下这里的图片大小为200x200pxpromise

div {

width:400px;

height:400px;

border:1px solid #000;

}

img {

width:100%;

height:100%;

}

1

2

3

4

5

6

7

8

9

无论容器有多大，只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。浏览器

那是否是就这这么简单完事儿了呢？若是你不介意图片被放大后可能出现失真的话也的确是这样就ok了。

假如你介意 图片放大后会失真，咱们能够改进上面的代码，只须要将img的样式简单修改布局

img {

max-width:100%;

max-height:100%;

}

1

2

3

4

max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是100px。而width的100%咱们上面已经说过了是相对于父级宽度的，因此为了避免让图片被放大后失真咱们能够设置img的最大宽度为自身尺寸大小，更通俗的讲就是只容许缩小不容许放大img。spa

具体状况中是选择width:100%仍是max-width:100%仍是依据我的的需求而定，另外在响应式设计中这个问题稍微会复杂一点。.net

响应式

设计

响应式设计中：若是是img标签引入的图片，能够使用延迟加载的方式来加载，在实际加载图片以前先用js检查窗口宽度，而后加载不一样分辨率的图片，好比宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，若是宽度是600px怎么办呢，经过百分比来缩放120px的图片达到合适的结果。code

这样作的好处是对于移动设备来讲，下载的图片会小一些，减小网页加载的时间。可是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会因为放大而产生必定的模糊感。xml

我以为响应式设计中对于图片的考虑应该从布局设计就开始，尽可能使图片在各个窗口宽度下的尺寸不要相差过大，经过排布更多的内容而不是扩大图片的尺寸来填充因为浏览器窗口扩大带来的空间。这样能够有效的减小图片放大模糊的问题。blog

最后，假如你的img是做为background使用的就须要经过background-size: cover/contain又或者是具体的百分比去设置图片在容器中所占比例的大小。这里就不详细介绍了，有兴趣能够到w3school里了解下。想了解图片在div中垂直居中自适应的朋友轻戳下方连接↓

相关文章推荐：