如何使用 JavaScript 调整图像大小

Question

我是网络开发的新手。 我有一个 PHP 网页，其中有一张图片。 我想用这个脚本在博客上发布这张照片

<div id="x"></div>

<script>
var img = document.createElement("img");
img.src = "http://www.meteoarachova.com/stickersPWS/sticker.php";
var src = document.getElementById("x");
src.appendChild(img);
</script>

如何调整图片大小并为博客访问者添加链接以返回图片页面？

Answer 1

使用el.style.width = 50%; 和img.style.height = 50%; 调整图像大小，这会将图像的宽度和高度调整50%。您还可以使用 el.style.width/height 在 CSS 中使用像素或其他大小增量。

至于创建链接，如果您想将图像用作链接，您可以创建一个a 标签并将其包裹在图像周围，以控制该元素中图像的大小。然后添加href属性，指向用户点击图片时要打开的页面。

let div = document.getElementById("x");

let aTag = document.createElement("a");
aTag.href = 'http://www.meteoarachova.com/stickersPWS/sticker.php';
aTag.title = 'click to open image';
aTag.target = '_blank';
aTag.outline = 'none';

let img = document.createElement("img");
img.src = "http://www.meteoarachova.com/stickersPWS/sticker.php";
img.style.width = '40%';
img.style.height = '40%';

aTag.append(img)
div.append(aTag);

console.log(document.getElementsByTagName('a')[0])

<div id="x"></div>