Bootstrap：里面有图像的按钮，删除可见的按钮部分

Question

I have the following html:

<br/><br/><center>
  <button>
    <img src="https://www.abeautifulsite.net/uploads/2014/09/menu-icon.png?width=600&key=4bc015049071e7e16c61decfe5eca75cd081194e39a9e235b780ce644ef7e6ce"/>
  </button>
</center>

and css:

button  {
  width: 80px;
  height: 90px;
}

img  {
  width: 80px;
  height: 90px;
}

which results in this . There are edges of the button visible. Is there a way to make them invisible/expand the image to all of the button?

Answer 1

You don't really need Bootstrap to do this. Here is a solution without:

 button { padding: 0; border: 0; background: transparent; } img { display: block; width: 80px; height: 90px; } 

 <br/><br/><center> <button> <img src="https://www.abeautifulsite.net/uploads/2014/09/menu-icon.png?width=600&key=4bc015049071e7e16c61decfe5eca75cd081194e39a9e235b780ce644ef7e6ce"/> </button> </center> 

And here is a solution with the version 3 of Bootstrap you tried to include (URL in your codepen gives a 404), taken from their documentation :

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); img { width: 80px; height: 90px; } 

 <br/><br/><center> <button class="btn btn-link"> <img src="https://www.abeautifulsite.net/uploads/2014/09/menu-icon.png?width=600&key=4bc015049071e7e16c61decfe5eca75cd081194e39a9e235b780ce644ef7e6ce"/> </button> </center> 

Answer 2

I would do it as:

 button { width: 80px; height: 90px; padding: 0; border: none; } img { width: 100%; height: 100%; overflow: hidden; } 

 <br/><br/> <center> <button> <img src="https://www.abeautifulsite.net/uploads/2014/09/menu-icon.png?width=600&key=4bc015049071e7e16c61decfe5eca75cd081194e39a9e235b780ce644ef7e6ce"/> </button> </center> 

Answer 3

Add to your css the border property and set it to 0

button {
  width: 80px;
  height: 90px;
  border: 0;
}