HTML+CSS图⽚⼤⼩⾃适应~PC电脑端、⼿机端
写页⾯的时候经常会遇到需要图⽚⾃适应容器⼤⼩这样的情况：
<style>
div{width:400px;height:400px;border:1px solid #000; }
手机上可以打html与css的appimg{width:100%;height:100%;}
</style>
不管容器有多⼤，只要将img的宽⾼设置成100%（这⾥的100%是相对于⽗级宽⾼⽽⾔）就能⾃适应容器⼤⼩。
那是不是就这这么简单完事⼉了呢？如果你不介意图⽚被放⼤后可能出现失真的话也的确是这样就ok了。
假如你介意图⽚放⼤后会失真，我们可以改进上⾯的代码，只需要将img的样式简单修改.
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{
display: block;(可不加 banner可以⽤)
height: auto;
max-width: 100%;（或者width：100%）
}
将以上标签加⼊之后保存，再⽤⼿机打开即是⾃适应⽹页了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。