我如何在不增加太多内容的情况下增加图像的背景尺寸？

Question

我正在尝试在背景上添加背景图像，但是我无法使用此代码显示图像的完整尺寸。当我尝试使用背景尺寸自动时，我得到正确的宽度，但高度很小，我知道这取决于内容的大小。但还是有办法

<div style="background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');background-repeat: no-repeat;background-size:500px 500px;">
  <a href ="https://github.com/" style="text-decoration: none;">

    <table>
      <tr>
        <td><h3 style="color: #fff;">Amarjeet Singh</h3></td>
      </tr>
      <tr>

      </tr>
    </table>


  </a>
</div>

Answer 1

图像被设置为<div>的背景，因此其大小取决于width的height和<div>。因此，如果高度较大，则将显示更多的background-image。只是为了说明，请检查下面的代码。我给<div>一个height : 600px，现在图像显示的是该高度。

因此，简而言之，背景图片仅显示元素的大小。您的元素越大，就会出现越多的图像。

div.container{
  background-size: 100% 100%;
  height: 600px; /* Just to illustrate */
}

<div class="container" style="background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');background-repeat: no-repeat;background-size:500px 500px;">
  <a href ="https://github.com/" style="text-decoration: none;">
    <table>
      <tr>
        <td><h3 style="color: #fff;">Amarjeet Singh</h3></td>
      </tr>
      <tr>
      </tr>
    </table>
  </a>
</div>