javascript - 使用 JavaScript 调整图像宽度
问题描述
我正在尝试在弹出窗口中重新调整图像的大小。原始图像是 6000 x 4000。我检查图像是否大于 500,如果是,我只是尝试将图像设置为 500。尝试使用“this”进行设置,使弹出窗口以选项卡,图像仍然是其原始大小。如果我尝试不使用“this”设置图像,则弹出窗口会按预期工作,涉及它在屏幕上的位置和框的大小,但图像仍然是其原始大小--6000 x 4000。(PS :我也必须使用 ES5。)
是什么赋予了?谢谢,厘米
<script language="javascript" type="text/javascript"><!--
// let i=0;
function resize() {
console.log("Testing");
let i=0;
if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
} else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
i=0; //This browser is Internet Explorer 6.x
} else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=25; //This browser is Firefox on Windows
} else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=45; //This browser is Mozilla on Windows
} else {
i=80; //This is all other browsers including Mozilla on Linux
}
var imgWidth = document.images[0].width;
var imgHeight = document.images[0].height;
console.log("Original image width is: " + imgWidth);
console.log("Original image height is: " + imgHeight);
if(imgWidth > 500){
//Shrink the image to size of popup frame
this.imgWidth = 500;
this.imgHeight = 500;
console.log("Adjusted image width is: " + imgWidth);
console.log("Adjusted image height is: " + imgHeight);
//Get display/screen width and height
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log("Screen width is: " + screenWidth);
console.log("Screen height is: " + screenHeight);
//Set popup position on display/screen
var leftpos = screenWidth / 2 ;
var toppos = screenHeight / 2 - imgHeight / 2;
console.log("Left position is: " + leftpos);
console.log("Top position is: " + toppos);
//Set popup frame width and height equal to adjusted image width and height
var frameWidth = imgWidth;
var frameHeight = imgHeight+i;
console.log("Frame width is: " + frameWidth);
console.log("Frame height is: " + frameHeight);
window.moveTo(leftpos, toppos);
window.resizeTo(frameWidth,frameHeight+i);
}
else if (document.documentElement && document.documentElement.clientWidth) {
var imgHeight = document.images[0].height + 40 - i;
var imgWidth = document.images[0].width + 20;
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - imgWidth / 2;
var toppos = height / 2 - imgHeight / 2;
frameWidth = imgWidth;
frameHeight = imgHeight + i;
window.moveTo(leftpos, toppos);
window.resizeTo(frameWidth, frameHeight + i);
} else if (document.body) {
window.resizeTo(document.body.clientWidth, document.body.clientHeight - i);
}
self.focus();
}//end resize() function
//--></script>
解决方案
利用
var imgWidth = document.images[0].style.width;
代替
var imgWidth = document.images[0].width;
推荐阅读
- svg - 如何使用 Itext 7 将 SVG 添加到 PDF?
- perl - 如何从命令行将参数输入到 Jenkins perl 脚本中?
- airflow - 任务重试次数超过 Airflow 中指定的重试次数
- scala - 运行 Seq[Column] 时,我在 Scala spark 中收到以下错误
- python - 我想计算每个一起出现的元组
- asp.net-mvc - 如何使用@DropDownListFor 获取枚举值的 id?
- r - 更快的 unique() 比较两个数据帧中的键
- html - 如何强制指针图标“抓取”,在平移时覆盖底层光标样式?
- r - 如何在 dplyr + purrr 中优化内存使用
- python - fsolve 对任何方程组都有用吗?