为什么 HTML 按钮图像不会缩小？答案

【问题标题】：Why won't HTML button images not shrink?为什么 HTML 按钮图像不会缩小？
【发布时间】：2017-09-19 01:53:18
【问题描述】：

我已经断断续续地尝试解决这个问题大约一个星期左右，作为最后的手段，我在这里寻求帮助。我有一个网站，其中动态构建包含文本、复选框和两个按钮的无序列表。每个按钮都有一个与之关联的图像。虽然按钮可以工作，但图像太大了，甚至没有显示在列表中的单个“行”中。

Screenshot of Problem on Webpage

我想做的是使按钮图像略大于复选框，并将文本、复选框和两个按钮放在同一行。我还想右对齐复选框和按钮，同时让文本左对齐。

这就是我在函数中动态地将复选框和按钮添加到列表的方式：

//Create the checkbox to add to the list element
    var select_checkbox = document.createElement('input');
    select_checkbox.type = 'checkbox';
    select_checkbox.id = json[i].deck_ID;

    //Add the checkbox to the list element
    list_item.appendChild(select_checkbox);

        //Create the delete button to add to the list element
        var delete_button = document.createElement('button');
        delete_button.type = 'submit';
        delete_button.style = 'background-color:transparent; border-color:transparent;';
        delete_button.id = json[i].deck_ID;
        delete_button.name = "delete_deck";
        delete_button.class = "icon";
        delete_button_image = document.createElement('img');
        delete_button_image.src = 'icons/trashcan.png';
        delete_button.appendChild(delete_button_image);
        list_item.appendChild(delete_button);

        //Create the delete button to add to the list element
        var hide_button = document.createElement('button');
        hide_button.type = 'submit';
        hide_button.style = 'background-color:transparent; border-color:transparent;';
        hide_button.id = json[i].deck_ID;
        hide_button.name = (json[i].hidden=='1')?"unhide_deck":"hide_deck";
        hide_button.title = (json[i].hidden=='1')?"Unhide Deck":"Hide Deck";
        hide_button.class = "icon";
        hide_button_image = document.createElement('img');
        hide_button_image.src = 'icons/unhidden_eye.png';
        hide_button.appendChild(hide_button_image);
        list_item.appendChild(hide_button);

我尝试通过delete_button.setAttribute(...) 设置固定的宽度和高度，但这并没有改变大小。我还尝试在 CSS 中更改按钮大小，使用类似的样式来固定宽度和高度。我什至尝试缩小图像本身的大小，但无济于事。以下是列表在 HTML 页面上的位置：

<div class="container" id="container">
    <div class="row" id="row">
        <div class="col-sm-4" id="faculty">
            <ul id="faculty_list" class="list-unstyled"></ul>
        </div>
        <div class="col-sm-4" id="student">
            <ul id="student_list" class="list-unstyled"> </ul>
        </div>
    </div>
</div>

我现在没有太多用于无序列表的 CSS：

ul{
    text-align: left;
}

【问题讨论】：

请也发布相关的 CSS。
@AndrewLyndem 我现在真的没有太多 CSS，除了对齐文本。我发布了我所拥有的
你在使用 Bootstrap 吗？我看到 col-sm-4
@mlegg 是的，我正在使用 Bootstrap
创建一个 jsfiddle，重现错误，人们可以帮助你...

标签： javascript html css button checkbox

【解决方案1】：

看看这个 JSFiddle：https://jsfiddle.net/timhjellum/jhdk2reg/

你需要设置按钮的宽度和高度，然后设置背景图片覆盖

.icon {
  width: 100px;
  height: 50px;
  background-image: url('http://placehold.it/350x150');
  background-size:cover;
  background-position: center;
  float: left;
  }

【讨论】：