在 HTML 中将图像重新调整为原始大小的 50%答案

【问题标题】：Image re-size to 50% of original size in HTML在 HTML 中将图像重新调整为原始大小的 50%
【发布时间】：2012-06-22 11:22:58
【问题描述】：

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

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

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

我做错了什么？谢谢

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

我在下面使用 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); 

    });

【问题讨论】：

标签： jquery html image

【解决方案1】：

您可以像这样使用srcset 属性的x 描述符：

<!-- Original image -->
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png" />

<!-- With a 80% size reduction (1/0.8=1.25) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 1.25x" />

<!-- With a 50% size reduction (1/0.5=2) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 2x" />

目前所有浏览器都支持，除了 IE。 (caniuse)

MDN documentation

【讨论】：

【解决方案2】：

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

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

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

受限于浏览器兼容性

【讨论】：

这种方法的唯一问题是它会在元素周围留下空白。这是因为 CSS 转换的工作方式是这样的：元素被渲染，转换被应用，它周围的任何其他元素都保持在原来的位置。

【解决方案3】：

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

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

此外，来自同一来源的良好实践建议：

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

【讨论】：

关于良好实践，需要调整客户端大小是有正当理由的。例如抗锯齿。

【解决方案4】：

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

你可以检查这个工作fiddle。

在this fiddle 中，我使用% 更改了图像大小，它正在工作。

也尝试使用此代码：

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

Here is 示例小提琴。

【讨论】：

我在答案中提供的小提琴链接对您有用吗？您可以在这里看到图像大小的差异吗？也请尝试使用我给出的style 属性
同样，当你放 100% 时，小提琴图像会变大，它与 div 大小有关吗？
是的，它在小提琴上发生了变化。插入时 50%
Interesting..fiddle 对你有用，但你自己的代码不行.. :) 别担心div.. 没有任何问题。
这会将图像大小调整为其容器宽度的 50%，而不是图像本身的原始物理宽度。