按图片的宽高计算在容器里显示的百分比

要按照图片的宽高比例计算在容器中显示的百分比，你可以使用以下代码：

// 获取容器元素和图片元素
const container = document.getElementById('container');
const image = document.getElementById('image');

// 获取图片的宽度和高度
const imageWidth = image.width;
const imageHeight = image.height;

// 获取容器的宽度和高度
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;

// 计算宽度比例和高度比例
const widthRatio = containerWidth / imageWidth;
const heightRatio = containerHeight / imageHeight;

// 取较小的比例作为缩放比例，以保持图片完全显示在容器中
const scale = Math.min(widthRatio, heightRatio);

// 将缩放比例转换为百分比
const scalePercentage = scale * 100;

// 在控制台输出缩放百分比
console.log('缩放百分比：', scalePercentage + '%');

在上面的代码中，我们假设已经有一个容器元素 `container` 和一个图片元素 `image`。我们获取了图片的宽度和高度以及容器的宽度和高度。

然后，我们计算了宽度比例和高度比例，这些比例表示容器的宽度和高度相对于图片的宽度和高度的缩放比例。

接下来，我们选择较小的比例作为缩放比例，以确保图片完全显示在容器中。

最后，我们将缩放比例转换为百分比，并在控制台输出。

请确保在运行上述代码之前，已经正确获取到容器和图片元素，并且图片已经加载完成。

希望能对你有所帮助！如果还有其他问题，请随时提问。