在脚本jQuery中调整图像大小

Question

I'm not familiar with Javascript coding as much as I do with HTML. 我不像Java那样熟悉Javascript编码。 Just want to ask, how to re-size images within this code? 只是想问一下，如何在此代码中调整图像大小？

<script type="text/javascript">
var image1 = new Image()
image1.src = "img/img1.jpg" 
var image2 = new Image()
image2.src = "img/img2.jpg"
</script>

I have worked it out in HTML by using this code, and I have no idea how to work my around in Javascript though: 我已经通过使用以下代码在HTML中解决了这个问题，但是我不知道如何在Javascript中解决问题：

<img src="img/www.png" alt="Logo" width="250" height="150" style="position: absolute; top: 10px; left:60px;" >

Your kind reply would be greatly appreciated. 您的答复将不胜感激。

McJim 麦吉姆

*sorry here is the complete code: *对不起，这里是完整的代码：

<?php include('variables/variables.php'); ?>

<head>

<script type="text/javascript">

var image1 = new Image()
image1.src = "img/img1.jpg"
var image2 = new Image()
image2.src = "img/img2.jpg"
</script>

</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

This is actually one php file, and is called from another php file. 这实际上是一个php文件，并从另一个php文件中调用。

Answer 1

Just do this: 只要这样做：

var image1 = new Image(250, 150);

so it is new Image(width, height) 所以是new Image(width, height)

Here are some docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement.Image?redirectlocale=en-US&redirectslug=Web%2FAPI%2FImage#Image_Element_constructor 以下是一些文档： https : //developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement.Image? redirectlocale = zh-CN & redirectslug = Web%2FAPI%2FImage# Image_Element_constructor

EDIT reflecting new code added by OP 编辑反映了OP添加的新代码

The problem is you aren't adding the images to the DOM, the webpage itself. 问题是您没有将图像添加到网页本身的DOM中。 Move the script into the body just above the other script and change the code to this: 将脚本移到其他脚本上方的主体中 ，并将代码更改为此：

var image1 = new Image(250, 150)
image1.src = "img/img1.jpg"
var image2 = new Image(350, 200)
image2.src = "img/img2.jpg"
var body = document.querySelector('body');
body.appendChild(image1);
body.appendChild(image2);

Here is a functioning JSBin example: http://jsbin.com/AzAvunOm/1/edit?html,output 这是一个正常运行的JSBin示例： http ://jsbin.com/AzAvunOm/1/edit?html，输出

So your code should look like this (you will have to adjust it for exactly what you want): 因此，您的代码应如下所示（您必须根据自己的需要进行调整）：

<?php include('variables/variables.php'); ?>

<head>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
    var image1 = new Image(250, 150)
    image1.src = "img/img1.jpg"
    var image2 = new Image(350, 200)
    image2.src = "img/img2.jpg"
    var body = document.querySelector('body');
    body.appendChild(image1);
    body.appendChild(image2);
</script>

<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

Answer 2

You can sett height and width as follows. 您可以如下设置高度和宽度。

image1.width = 250;
image1.height = 150;

Answer 3

I think u need something like this; 我认为你需要这样的东西；

<!DOCTYPE html>
 <html>
 <body>

<script type="text/javascript">


 function changesize(){
   var  myid=document.getElementById('myimg');
   myid.with=300;
   myid.height=300;
  }

function changesize2(){
var  myid=document.getElementById('myimg');
myid.with=200;
myid.height=100;
}
</script>


<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTe0LZa5KiYoWxGAC-_5gP2MoOuBx8QkCWLGeCuE01-0UPNrOVhrsTeNcvD" id='myimg' alt="Logo" width="250" height="150" style="position: absolute; top: 10px; left:60px;" >



<button type='submit' value='Btn1' name='Btn1' onclick="changesize()" >
<button type='submit' value='Btn2' name='Btn2'  onclick="changesize2()" >

</body>
</html>

在脚本jQuery中调整图像大小

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-02-01 15:12:26

解决方案2
1 2014-02-01 15:11:50

解决方案3
1 2014-02-01 15:22:54

在脚本jQuery中调整图像大小

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-02-01 15:12:26

解决方案2 1 2014-02-01 15:11:50

解决方案3 1 2014-02-01 15:22:54

解决方案1
2 已采纳 2014-02-01 15:12:26

解决方案2
1 2014-02-01 15:11:50

解决方案3
1 2014-02-01 15:22:54