图片适配容器大小

最新推荐文章于 2024-08-25 00:01:07 发布

丑丑丫

最新推荐文章于 2024-08-25 00:01:07 发布

阅读量402

点赞数

分类专栏： js 文章标签： image适配

本文链接：https://blog.csdn.net/coder_girl/article/details/85260394

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

	/**
	@params {imgBox}  Number 图片容器的dom
	@params {thisImg}  Number 图片的dom
	*/
	changeImage(imgBox, thisImg, url) {
            var maxWidth = imgBox.clientWidth
            var maxHeight = imgBox.clientHeight
            var image = new Image()
            image.src = thisImg.src
            image.onload = function () {
                var width = image.width
                var height = image.height
                if (width > maxWidth || height > maxHeight) {
                    if (maxWidth / maxHeight  <= image.width / image.height) {
                        width = maxWidth
                        height = maxWidth * (image.height / image.width);
                    } else {
                        width = maxHeight * (image.width / image.height);
                        height = maxHeight
                    }
                }
                thisImg.width = width
                thisImg.height = height
            }
        }