왜 HTML 버튼 이미지가 축소되지 않습니까?

Question

나는이 문제를 약 1 주 동안 계속해서 해결하려고 노력하고 있으며 최후의 수단으로 도움을 요청하고 있습니다. 나는 텍스트, 체크 박스 및 두 개의 버튼이 포함 된 정렬되지 않은 목록을 동적으로 빌드하는 웹 사이트를 가지고 있습니다. 각 단추에는 연관된 이미지가 있습니다. 단추가 작동하더라도 이미지가 너무 커서 목록의 단일 "행"에 표시되지 않습니다. 내가하고 싶은 무엇

Screenshot of Problem on Webpage

체크 박스보다 약간 큰 버튼 이미지를 확인하고 같은 줄에 텍스트, 체크 박스, 두 버튼이 있습니다. 텍스트를 왼쪽 정렬 한 채로 확인란과 단추를 오른쪽 정렬하고 싶습니다. 내가 delete_button.setAttribute(...)에 의해 고정 된 폭과 높이를 설정하려했지만 그 크기를 변경하지 않은

//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); 

: 나는 동적으로 함수 목록에 체크 박스와 버튼을 추가하고 어떻게 이것은

. 나는 또한 CSS의 버튼 크기를 변경해 보았습니다. 비슷한 스타일을 사용하여 너비와 높이를 고정 시켰습니다. 나는 심지어 이미지 자체의 크기를 줄이려고 시도했지만 아무 소용이 없었다.

<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; 
} 

Answer 1

이 JSFiddle에서 살펴 보자 : 목록은 HTML 페이지에서 어디에 위치 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; 
    }