图像重新调整大小为HTML中原始大小的50％

I'm trying to re-size a image in HTML, it's got width 314px and height 212px. I want to re-size it to 50%...

我正在尝试用HTML重新调整图像大小，它的宽度为314px，高度为212px。我想将其重新调整为50％......

but using this I still get a bigger image instead of a half-size image.

但使用这个我仍然得到一个更大的图像而不是一个半尺寸的图像。

<img src="image.jpg" width="50%" height="50%" />

What did I do wrong? Thanks

我做错了什么？谢谢

<html>
    <head>
    <title></title>
    </head>    
    <body>
        <div>
        <img src="image4.png" width="50%" height="50%"/>
        </div>
    </body>
</html>

I resolved the above problem using jquery below:

我使用下面的jquery解决了上面的问题：

$(document).ready(function(e) {
        var imgs = document.getElementsByTagName('img');
        var imgLength = imgs.length;

        for(var i=0; i<= imgLength-1;i++){

            var imgWidth = imgs[i].clientWidth;
            var imgHeight = imgs[i].clientHeight;

            $('img').eq(i).attr({width:imgWidth/2, height: imgHeight/2});

            console.log(imgWidth);
        }

        console.log(imgLength); 

    });

3 个解决方案

#1

You did not do anything wrong here, it will any other thing that is overriding the image size.

你在这里没有做错任何事，它会覆盖图像大小的任何其他东西。

You can check this working fiddle.

你可以检查这个工作小提琴。

And in this fiddle I have alter the image size using %, and it is working.

在这个小提琴我用％改变图像大小，它正在工作。

Also try using this code:

也尝试使用此代码：

<img src="image.jpg" style="width: 50%; height: 50%"/>

Here is the example fiddle.

这是小提琴的例子。

#2

The percentage setting does not take into account the original image size. From w3schools :

百分比设置未考虑原始图像大小。来自w3schools：

In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

在HTML 4.01中，宽度可以以像素或包含元素的％来定义。在HTML5中，值必须以像素为单位。

Also, good practice advice from the same source :

此外，来自同一来源的良好做法建议：

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

提示：使用高度和宽度属性缩小大图像会强制用户下载大图像（即使它在页面上看起来很小）。为避免这种情况，请在页面上使用之前使用程序重新缩放图像。

#3

We can do this by css3 too. Try this:

我们也可以通过css3来做到这一点。尝试这个：

.halfsize {
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

<img class="halfsize" src="image4.jpg">

subjected to browser compatibility
受浏览器兼容性

#1