很多时候我写图片的时候很喜欢外面包裹一层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%;
}