用javascript设置html按钮图像答案

【问题标题】：setting html button image with java script用javascript设置html按钮图像
【发布时间】：2020-12-10 19:22:48
【问题描述】：

我正在开发我的第一个网站，我想创建一个 HTML 按钮并在其上放置图像。但是图像的大小错误，我正在寻找一种在将图像放在按钮上之前缩放图像的方法。我就是这样尝试的：

function setImg(){
   var img = new Image(200,200);
   img.src = "imgs/youtubeImg.png";
   img.style.width = 100;
   img.style.height = 100;
   document.getElementById("youtubeButton").style.backgroundImage = img;
}

我不知道为什么它不起作用。我不知道这是否重要，但这个函数是在按钮创建后调用的。希望你能帮助我，谢谢。

编辑：方法：appendChild：

这就是那个函数的样子

但我想让 img 适合这个按钮：

但这只有在图像是按钮的背景图像时才有效。

编辑 2：我找到了解决方案。您可以只设置背景大小，因此它会自动缩放图像。

【问题讨论】：

标签： javascript html css htmlbutton

【解决方案1】：

请试试这个，

使用appendChild() 添加图片。

function setImg(e){
   e.classList.add("active")
   var img = new Image(200,200);
   img.src = "https://images.unsplash.com/photo-1530103043960-ef38714abb15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
   img.style.width = "180px";
   img.style.height = "70px";
   document.getElementById("youtubeButton").textContent= "";
   document.getElementById("youtubeButton").appendChild(img);

}

button{
  padding:20px 30px;
}
button.active{
  padding:0;
  margin:0;
}

&lt;button id="youtubeButton" onclick="setImg(this)"&gt;Youtube Button&lt;/button&gt;

【讨论】：

第一种方法没有缩放图像，但第二种方法效果很好。谢谢
其实还有一个问题。如果我现在尝试将 borderRadius 设置为 50% 来获得一个圆圈，它只会停留在顶部并且不会改变
我听不懂你的话，你是在图像中添加borderRadius吗？
请在此处添加截图
我不知道如何在cmets中放截图，所以我将它放在问题中

【解决方案2】：

如果您通过 css 设置背景图片（而不是像 iou 一样将其附加到按钮上），那么您需要设置 background-size 属性，查看详细信息

【讨论】：

尝试写出能够真正帮助未来访问此问题的人的答案。 查看详细信息不是一个好的答案，也不会让你获得很多支持。如果无法简明地回答问题，请投票结束问题并且不要发布答案。在这种情况下，最多将您在此处写的内容作为评论发布。
@martijn 你在说什么，整个解决方案是 background-size ，大多数人都知道如何添加 css 属性，如果有人不那么他们应该查看如何使用 css，一切都是在这里回答