css让图片自适应容器（div）大小,超便捷响应式图片自适应

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

1.简单的做法

 

 

1 2 3 4 5

<div>         <img src="1.jpg" alt=""> </div>

 

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

 

 

1 2 3 4 5 6 7 8 9 10 11

div {     width: 400px;     height: 400px;     border: 1px solid #000;     } img {     width: 100%;     height: 100%; }

 

不管容器有多大，只要将

img

的宽高设置成

100%

（这里的100%是相对于父级宽高而言）就能自适应容器大小。

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

2.考虑失真的做法

假如你介意 图片放大后会失真，我们可以改进上面的代码，只需要将img的样式简单修改

 

 

1 2 3 4 5 6

img {     max-width: 100%;     max-height: 100%; }

 

max-width:100%

和

width:100%

的区别在于,max-width是相对于

img

自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽，在这里就是

100px

。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。

具体情况中是选择

width:100%

还是

max-width:100

%还是依据个人的需求而定，另外在响应式设计中这个问题稍微会复杂一点。

响应式

响应式设计中：如果是

img

标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。

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

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

假如你的img是作为

background

使用的就需要通过

background-size: cover/contain

又或者是具体的百分比去设置图片在容器中所占比例的大小。

另外HTML5有个新特性，通过 

srcset + size

 属性以及

w

 标识符，能够解决响应式图片切换的问题，同时向下兼容所有屏幕尺寸，无需额外JS/CSS，适配各种屏幕（各种device pixel ratio，屏幕尺寸）。虽然兼容性一般，但肯定是将来的趋势。经测试，貌似最新的 iOS 8.4.1 也支持这个新属性了！

代码如下

 

 

1 2 3 4 5

<img class="image" src="mm-width-128px.jpg"      srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"      sizes="(max-width: 360px) 340px, 128px">

 

代码虽然不好看，但是比其他的省事多了。此方法特别适合用于 cms 中，不破坏原意，同时也适合大量图片的情况。想要研究

srcset

去张鑫旭大神的博客学习学习，这里就不详细介绍了。

转自：http://www.clramw.top/?p=129