图片链接宽度铺满页面问题求助

我想给一张图片添加链接，但添加后链接的可点击区域会铺满整个页面宽度。我查过相关帖子，但修改width和height属性没起作用，以下是我的代码：

原CSS代码 #

.banner {
    width:88px 
    height:31px
}

原HTML代码 #

<div style= "position:relative; top:100px">
  <div class="banner">
    <a href="https://liminal.photos"><img src="https://liminal.photos/liminalbanner.jpg"></a>
  </div>
  <p>如果音乐无法播放，请点击上方横幅</p>
  <div align="center">
    <textarea readonly>
      <a href="https://liminal.photos"><img src="https://liminal.photos/liminalbanner.jpg"></a>
    </textarea>
</div>

解决方法 #

1. 修复CSS语法错误：你写的CSS里，width:88px和height:31px后面都没加分号，浏览器无法识别这两个样式，导致.banner还是默认的块级元素，占满页面宽度，链接区域自然也跟着铺满。
2. 限制链接区域大小：<a>标签默认是行内元素，需要设置display: inline-block让它的宽度收缩到图片尺寸；同时让图片占满容器，保持比例。

修改后的完整代码 #

CSS

.banner {
    width: 88px;
    height: 31px;
}

.banner a {
    display: inline-block; /* 让链接收缩到图片大小 */
}

.banner img {
    width: 100%; /* 图片填满容器 */
    height: auto; /* 保持图片比例 */
}

HTML

<div style="position:relative; top:100px">
  <div class="banner">
    <a href="https://liminal.photos"><img src="https://liminal.photos/liminalbanner.jpg"></a>
  </div>
  <p>如果音乐无法播放，请点击上方横幅</p>
  <div align="center">
    <textarea readonly>
      <a href="https://liminal.photos"><img src="https://liminal.photos/liminalbanner.jpg"></a>
    </textarea>
</div>

内容的提问来源于stack exchange，提问作者Generiic