包裹<a> tag around it

Question

with this code the image inside the div doesn't appear, it appears only if i remove the (a) tag around it. How to fix this? Thanks in advance.

<a href="images/myphoto.jpg">
<div class="thumb" style="background-image: url(images/myphoto.jpg); background-size: contain;"></div>
</a>

Answer 1

如果元素为空，则在设置高度和宽度之前不会显示背景。

.thumb{
  height:100px;
  width:100px;
}

<a href="images/myphoto.jpg">
  <div class="thumb" style="background-image: url(https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300); background-size: contain;"></div>
</a>

Answer 2

这是因为容器默认高度为0px，尝试添加

.thumb{
    background-image: url(http://via.placeholder.com/350x150);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
}

<a href="images/myphoto.jpg">
<div class="thumb" style="background-image: url(http://via.placeholder.com/350x150); background-size: contain;"></div>
</a>

Answer 3

您需要为div设置高度和宽度。 获取高度和宽度，并在css文件中使用它，如下所示：

.thumb {
height: 250px;
width: 250px;
}

高度和宽度是图像尺寸。