图片完整缩放且不变形的方法

最新推荐文章于 2024-04-28 17:33:24 发布

梦幻空花~

最新推荐文章于 2024-04-28 17:33:24 发布

阅读量746

点赞数

分类专栏： js css 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_38868959/article/details/124366155

版权

js 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS和JavaScript来确保图片在不同场景下完整缩放且不变形。针对宽图和长图，提供了不同的解决方案。通过JS函数`resizeImg`，可以根据最大宽度和高度动态调整图片尺寸，保持比例，避免失真。该方法适用于响应式设计和网页布局中图片展示的需求。

摘要由CSDN通过智能技术生成

图片完整缩放且不变形的方法

首页我们会想到css直接这样设置：

img {
		width: 100%;
		height: auto
	}

对于宽图来说，这个确实可以，但是长图呢，那么久不行了。我们可以写js去判断

var img = document.getElementById('img')

			function resizeImg(img, maxWidth, maxHeight) {
				var w = img.width,
					h = img.height;
				// 即图片哪边长就完成显示哪一边,其余那边相当于设置auto
				if (w < maxWidth && h < maxHeight) return;
				w / h > maxWidth / maxHeight ? img.width = maxWidth : img.height = maxHeight;
			}
			resizeImg(img, 250, 250);