html - 按钮不缩小图像？

Question

我有一个 200px*200px <img>在<button>在我的页面上。如果我使用 CSS 缩小图像:

img{
    width:50%;
    height:50%;
}

，按钮仍然很大，就好像图像仍然是全尺寸的。

有什么解决办法吗？

谢谢。

Answer 1

试试这个:

        img {
          width: 50%;
          height: auto;
        }

<button>
  <img src="https://www.google.co.uk/images/srpr/logo11w.png" />
</button>