a标签注意事项

91 阅读1分钟

很多时候我写图片的时候很喜欢外面包裹一层a标签,这样子用户点击图片时就可以跳转了,但是a标签是行内元素,因此我有时候总是发现给a写样式了,然后设置里面的图片宽高为100%。但是总是没有和我想象的一样。哪有问题呢?问题就是a是行内标签,默认是inline,此时宽高不生效。

<a href="#" class="homeImg">
      <img src="../../assets/img/homeImg.png" alt="图片">
    </a>

因此只要设置a的display就好了。

//我是用less写的
.homeImg {
  display: block;
  width: 100%;
  height: 150px;

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