Javascript HTML>；根据窗口和图像大小旋转和缩放图像
我正在使用HTML/Javascript，希望根据窗口大小调整图像大小。图像将占据所有窗口空间，但在调整大小时保持其纵横比。此外，如果窗口大小大于其最长边，图像将旋转并调整大小 例如，如果图像的宽度大于高度，并且窗口大小更改为非常高，则图像应旋转并调整大小，以最大化窗口空间，同时保持图像的纵横比不变。图像也应该在屏幕上居中，以便在图像的两侧具有相同的死角 我没办法让它工作。这是到目前为止我的代码Javascript HTML>；根据窗口和图像大小旋转和缩放图像,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我正在使用HTML/Javascript，希望根据窗口大小调整图像大小。图像将占据所有窗口空间，但在调整大小时保持其纵横比。此外，如果窗口大小大于其最长边，图像将旋转并调整大小 例如，如果图像的宽度大于高度，并且窗口大小更改为非常高，则图像应旋转并调整大小，以最大化窗口空间，同时保持图像的纵横比不变。图像也应该在屏幕上居中，以便在图像的两侧具有相同的死角 我没办法让它工作。这是到目前为止我的代码 <!doctype html> <html> <head> &
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function resize_canvas(){
var main_canvas=document.getElementById("test");
var cxt=main_canvas.getContext("2d");
var img=new Image();
var ratio = 1;
var changed = 1;
var mid = 1;
var srcLink = "tall.JPG"; // test with tall and wide pics
main_canvas.width = window.innerWidth;
main_canvas.height = window.innerHeight;
img.src=srcLink;
if(window.innerWidth > window.innerHeight){ // if window port is wider than tall
changed = window.innerWidth / (img.width / img.height);
mid = window.innerHeight / 2;
img.onload = function()
{
if (img.width < img.height){
ratio = window.innerHeight / img.height;
changed = img.width * ratio;
cxt.rotate(90 * Math.PI / 180);
cxt.drawImage(img, 0, -img.height,changed,window.innerWidth);
} else {
cxt.drawImage(img,0,mid,window.innerWidth,changed);
}
} // end img onload call
}else{ // if window port is taller than wide
ratio = window.innerHeight / img.height;
changed = img.width * ratio;
mid = window.innerWidth / 2;
img.onload = function()
{
if (img.width > img.height){
ratio = window.innerWidth / img.width;
changed = img.height * ratio;
mid = window.innerHeight / 2 - changed / 2;
cxt.rotate(90 * Math.PI / 180);
cxt.drawImage(img, 0, -img.height,window.innerHeight,changed);
} else {
cxt.drawImage(img,mid,0,changed,window.innerHeight);
}
} // end img on load
} // end window size else block
} // end resize function
</script>
</head>
<body onload="resize_canvas();" onresize="resize_canvas();">
<canvas id="test"> canvas not supported </canvas>
</body>
</html>
css file
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#test
{
width: 100%; height: auto;
}
函数resize_canvas（）{
var main_canvas=document.getElementById（“测试”）；
var cxt=main_canvas.getContext（“2d”）；
var img=新图像（）；
var比率=1；
var=1；
var-mid=1；
var srcLink=“tall.JPG”；//使用高宽图片进行测试
main_canvas.width=window.innerWidth；
main_canvas.height=window.innerHeight；
img.src=srcLink；
如果（window.innerWidth>window.innerHeight）{//如果窗口端口比高度宽
更改=窗内宽度/（img.width/img.height）；
中间=窗内高度/2；
img.onload=函数（）
{
if（img.宽度img.高度）{
比率=窗内宽度/img.width；
更改=img.高度*比率；
mid=window.innerHeight/2-已更改/2；
cxt.旋转（90*Math.PI/180）；
cxt.drawImage（img，0，-img.height，window.innerHeight，已更改）；
}否则{
cxt.drawImage（img、mid、0、已更改、window.innerHeight）；
}
}//加载时结束img
}//结束窗口大小else块
}//结束调整大小功能
不支持画布
css文件
html，正文{
宽度：100%；
身高：100%；
边际：0px；
}
#试验
{
宽度：100%；高度：自动；
}
<html>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var fitAspectRatio = function(srcWidth, srcHeight, fitWidth, fitHeight) {
if(fitHeight > fitWidth) {
theta = Math.PI / 2;
var temp = srcWidth;
srcWidth = srcHeight;
srcHeight = temp;
} else {
theta = 0;
}
var ratio = [fitWidth / srcWidth, fitHeight / srcHeight];
ratio = Math.min(ratio[0], ratio[1]);
return {
width : srcWidth * ratio,
height : srcHeight * ratio,
angle : theta
};
};
var img = new Image();
img.src = 'tall.JPG';
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
window.onresize = function() {
var newsize = fitAspectRatio(img.width, img.height, window.innerWidth, window.innerHeight);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.centerX = canvas.width / 2;
img.centerY = canvas.height / 2;
if(newsize.angle != 0) {
ctx.translate(img.centerX, img.centerY);
ctx.rotate(newsize.angle);
ctx.translate(-img.centerX, -img.centerY);
ctx.drawImage(img, (canvas.width - newsize.height) / 2, (canvas.height - newsize.width) / 2, newsize.height, newsize.width);
} else {
ctx.drawImage(img, (canvas.width - newsize.width) / 2, (canvas.height - newsize.height) / 2, newsize.width, newsize.height);
}
};
window.onresize();
};
</script>
<style>
body {
background: #001;
}
#canvas1 {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
</body>
</html>
window.onload=函数（）{
var fitAspectRatio=函数（srcWidth、srcHeight、fitWidth、fitHeight）{
如果（安装高度>安装宽度）{
θ=Math.PI/2；
var-temp=srcWidth；
srcWidth=srcHeight；
SRC高度=温度；
}否则{
θ=0；
}
var比率=[fitWidth/srcWidth，fitHeight/srcHeight]；
比率=数学最小值（比率[0]，比率[1]）；
返回{
宽度：srcWidth*比值，
高度：SRC高度*比率，
角度：θ
};
};
var img=新图像（）；
img.src='toll.JPG'；
var canvas=document.getElementById（“canvas1”）；
var ctx=canvas.getContext（“2d”）；
window.onresize=函数（）{
var newsize=fitAspectRatio（img.width、img.height、window.innerWidth、window.innerHeight）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
img.centerX=canvas.width/2；
img.centerY=canvas.height/2；
如果（newsize.angle！=0）{
ctx.translate（img.centerX，img.centerY）；
ctx.旋转（新尺寸角度）；
ctx.translate（-img.centerX，-img.centerY）；
ctx.drawImage（img，（canvas.width-newsize.height）/2，（canvas.height-newsize.width）/2，newsize.height，newsize.width）；
}否则{
ctx.drawImage（img，（canvas.width-newsize.width）/2，（canvas.height-newsize.height）/2，newsize.width，newsize.height）；
}
};
onresize（）；
};
身体{
背景：#001；
}
#游说{
位置：绝对位置；
排名：0；
左：0；
填充：0；
保证金：0；
}