图片大小根据外层div自适应 pc端

pc端：

为了让IMG自适应大小，如下我做了一个横向自适应的示例：

• IMG样式（横向拉伸，纵向自动匹配大小）
• IMG样式（纵向拉伸，横向自动匹配大小）
• 自动根据外框大小，判断横纵向拉伸和自动匹配

IMG样式

（横向拉伸，纵向自动匹配大小）

1 2	width:100%; height:auto;

（纵向拉伸，横向自动匹配大小）

1 2	width:auto; height:100%;

（自动根据外框大小，判断横纵向拉伸和自动匹配）

1 2	width:auto; height:auto; max-width:100%; max-height:100%;

这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：

• width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
• height:auto;图片的高度自己适应(图片有多高就显示多高)
• width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
• max-width:100%;图片的宽度不能超过图片所在的空间的宽度
• max-height:100%;图片的高度不能超过图片所在的空间的高度
• max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

img外层还有div控制宽高