使用 JavaScript 调整图像大小

Question

我有一个网页，其中有一张图片。我想 post 使用此脚本在博客上显示此图片

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

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

如何调整图像大小并将 link 的博客访问者 return 添加到图像页面？

Answer 1

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

Answer 2

虽然我不太清楚你到底想完成什么，但似乎没有理由使用太多 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>

Answer 3

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

function ShowImage() {
  document.getElementById("theLink").href = "https://whosebug.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>

使用 JavaScript 调整图像大小

resize image with JavaScript

javascript

url

photo

image