在HTML中将图像大小调整为原始大小的50%。

Question

在HTML中将图像大小调整为原始大小的50%。

64

我想在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); 

    });

- Sam

4个回答

14

我们也可以通过CSS3来实现。尝试这样做：

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

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

受浏览器兼容性的限制

- Nalan Madheswaran

10

这种方法唯一的问题在于会在元素周围留下空白。这是因为 CSS 变换的工作方式是：元素被渲染，变换被应用，其他任何周围的元素仍停留在原处。 - Yuval Karmi

此外，它的缩小是相对于周围的空间而言，而不是相对于自身。 - Sagive

11

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

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

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

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

- Skippy le Grand Gourou

1

关于良好的实践，希望客户端大小调整是有合理理由的。例如反锯齿。 - iPherian

可能是这样，但是没有视网膜支持。 - Sagive

8

您可以使用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文档

- Mathix420

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asif · Accepted Answer

您在这里没有做错任何事情，可能是其他东西覆盖了图片大小。

您可以检查这个工作 fiddle。

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

还可以尝试使用以下代码：

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

这里是示例 fiddle。