我们在写页面的时候时常会遇到必要图片自适应容器大小如许的环境，底下我就开门见山的申明一下怎样去实现如许一个结果。
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="妹妹-width-128px.jpg"
srcset="妹妹-width-128px.jpg 128w, 妹妹-width-256px.jpg 256w, 妹妹-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">
|
