css如何调整图片宽度与高度比较哪大以哪个为准另外一个尺寸自适应

Question

css如何调整图片宽度与高度比较哪大以哪个为准另外一个尺寸自适应

Answer 1

纯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%';
    }
});

获取图片原始宽高拓展阅读网页链接