Question

我正在尝试用HTML重新调整图像大小，它的宽度为314px，高度为212px。我想把它重新调整到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); 

    });

Answer 1

这里你没有做错任何事，它会覆盖图像大小。

您可以查看此工作fiddle。

在this fiddle中，我使用%更改了图片大小，并且它正在运行。

也尝试使用此代码：

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

Here is示例小提琴。

Answer 2

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

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

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

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

Answer 3

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

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

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

受浏览器兼容性

Answer 4

您可以像这样使用 function createTable( rowCount, columnCount ) { let newTable = document.body.appendChild(document.createElement('table')) for(let r=0;r<rowCount;++r) { let newRow = newTable.insertRow() for(let c=0;c<columnCount;++c) { newRow.insertCell().textContent = `${r}-${c}` } } } 属性的 x 描述符：

srcset

目前支持除 IE 之外的所有浏览器。 (caniuse)

MDN documentation

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

4 个答案: