使用 JavaScript 调整图像大小答案

【问题标题】：resize image with JavaScript使用 JavaScript 调整图像大小
【发布时间】：2021-06-25 23:23:43
【问题描述】：

我有一个网页，其中有一张图片。我想用这个脚本在博客上发布这张图片

<div id="container"></div>

<script>
var url = 'http://www. jpg';
var image = new Image();
image.src = url;
document.getElementById('container').appendChild(image);
</script>

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

【问题讨论】：

标签： javascript image url photo

【解决方案1】：

虽然我不太清楚你想要完成什么，但如果你所做的只是在你的博客或网站上包含一张图片，那么似乎没有理由使用大量的 JavaScript。

如果我正确理解您的问题，您可以使用简单的 HTML 和 CSS。

<div id="container">
<a href="linktowherever" target="_blank">
<img src="linktoimage" style="width:50px;">
</a>
</div>

让浏览器的渲染器来调整大小。

如果你真的必须通过 JavaScript 来做这件事，那么你可以像这样重新创建上面的 HTML；

<script>
var url = 'http://www. jpg';
var image = new Image();
image.src = url;
image.style.width = "50px";
var link = document.createElement("a");
link.href = "linktowherever";
link.target = '_blank';
link.appendChild( image );
document.getElementById('container').appendChild( link );
</script>

【讨论】：

【解决方案2】：

我会在原始页面中嵌入所有必要的 HTML，并在需要时使用 CSS 使其可见并正确调整大小。

function ShowImage() {
  document.getElementById("theLink").href = "https://stackoverflow.com";
  document.getElementById("theImg").src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27";
  document.getElementById("container").classList.remove("detail-hidden");
}

.detail-hidden .detail {
  display: none; 
}

.container img {
  max-width: 50px;
}

  <br/>
  <br/>
  <div id="container" class="container detail-hidden">
     <button onclick="ShowImage();">Show Image</button>
     <div class="detail">
       <a id="theLink" href="" target="_blank">Load Page</a><br/>
       <img id="theImg">
     </div>
  </div>

【讨论】：

【解决方案3】：

使用！ element.style.transfom="scale(x,y)";

【讨论】：