设置图片全屏且不变形(宽/高是div的100%)
2023-09-06 本文已影响0人
zlf_j
// 图片默认全屏,即宽或高100%
// 获取div可视宽高(clientHeight,clientWidth)
var largeImageBox = document.getElementById('largeImageBox')
// 默认图片宽/高是全屏
var inner = document.getElementById('largeImage')
if (inner) {
// 防止图片未加载完,宽高取值为0
inner.onload = function () {
// 电脑屏幕高=宽
if (largeImageBox.clientHeight == largeImageBox.clientWidth) {
// 高>=宽,图片高默认为div高度
if (inner.height >= inner.width) {
inner.style.height = largeImageBox.clientHeight + 'px'
} else {
// 高<宽,图片宽默认div宽度
inner.style.width = largeImageBox.clientWidth + 'px'
}
// 电脑屏幕高<宽
} else if (largeImageBox.clientHeight < largeImageBox.clientWidth) {
// 高>=宽,图片高默认为div高度
if (inner.height >= inner.width) {
inner.style.height = largeImageBox.clientHeight + 'px'
} else {
// 确保图片高度不超过100%,超过则取高
const newHeight =
(largeImageBox.clientWidth * inner.height) / inner.width
if (newHeight > largeImageBox.clientHeight) {
inner.style.height = largeImageBox.clientHeight + 'px'
} else {
// 图片宽默认div宽度
inner.style.width = largeImageBox.clientWidth + 'px'
}
}
} else {
// 电脑屏幕高>宽
// 高>=宽,图片宽默认为div宽度
if (inner.height >= inner.width) {
inner.style.width = largeImageBox.clientWidth + 'px'
} else {
// 确保图片宽度不超过100%,超过则取宽
const newWidth =
(largeImageBox.clientHeight * inner.width) / inner.height
if (newWidth > largeImageBox.clientWidth) {
inner.style.width = largeImageBox.clientWidth + 'px'
} else {
// 图片高默认div高度
inner.style.height = largeImageBox.clientHeight + 'px'
}
}
}
}
}