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

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和。因此，如果高度较大，则会显示更多内容。只是为了说明，请检查下面我的代码。我已经给出了a ，现在图像显示了该高度。height<div>background-image<div>height : 600px因此，简而言之，您的背景图像仅显示元素的大小。元素越大，图像就会出现越多。<div&nbsp; class="container"&nbsp;&nbsp; &nbsp; &nbsp; style=" height: 600px; /* Just to illustrate */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: url('https://firebasestorage.googleapis.com/v0/b/growthfilepractice.appspot.com/o/1%20(2).jpg?alt=media&token=48244df9-a2bb-412a-81f5-854e2dbc4939');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size:500px 500px;">&nbsp; <a&nbsp; class="nameAnchor"&nbsp;&nbsp; &nbsp; &nbsp; href ="https://github.com/"&nbsp;&nbsp; &nbsp; &nbsp; style=" text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 10px; /* Set your Left position here */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 100px; /* set your top position here */&nbsp; ">&nbsp; &nbsp; <span>Amarjeet Singh</span>&nbsp; </a></div>

Answer 2

我建议你设置背景大小：封面。如果您想要的话，这会自动将其设置为完整尺寸。