Question

我有以下html：

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

和CSS：

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

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

，结果为this。按钮的边缘可见。有没有办法使它们不可见/将图像扩展到所有按钮？

Answer 1

您实际上并不需要Bootstrap来执行此操作。这是一个没有以下解决方案的解决方案：

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>

这是您尝试包括的Bootstrap版本3（解决方案中的URL提供了404）的一种解决方案，摘自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

我会这样做：

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

将border属性添加到CSS中并将其设置为0

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

Bootstrap：内部带有图像的按钮，删除可见的按钮部分

3 个答案: