1、首先需要新建一个HTML页面。
2、然后输入页面的标题，可以按照下方图中的进行设置。
3、然后在根据下方图片中的代码进行编辑，
4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。
5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。
6、然后在输入命令.img img{ width:100%height:auto}，这样就完成了。
纯css实现有很多局限性,建议使用js
.img{max-height:100%
max-width:100%
} //缺点 如果图片宽高同时大于父容器,图片会被拉伸
使用js辅助：(部分api为h5特有，注意兼容性)
var oImg = document.querySelector('.img')oImg.addEventListener('load', function () {
//图片未加载完成前无法获取原始宽高，所以需要图片加载完成后再判断
if (oImg.naturalWidth >= oImg.naturalHeight) {
oImg.style.width = '100%'
} else {
oImg.style.height = '100%'
}
})
获取图片原始宽高拓展阅读网页链接
