img 图片自动适应div的方法

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

1.简单的做法

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

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

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

不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。

图片可能会失真。

2.考虑失真的做法
假如你介意 图片放大后会失真，我们可以改进上面的代码，只需要将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%还是依据个人的需求而定，另外在响应式设计中这个问题稍微会复杂一点。