背景图片 css 无法使用高度和宽度属性

Question

我有一张静态图片，但现在我需要将它传递给 css。但是当在 css 中传递背景为属性的图像时，它的形状与原始代码不一样，看起来很乱。如果我给它的尺寸与第一个代码中的尺寸相同，为什么会发生这种情况？

原创html作品：

<a href="{{url}}" target="_blank"><img src="assets/img/latam.png" width="152" height="59" alt="" /></a>

新 css:

  .img-latam {
    background-image: url("assets/img/latam.png");
    width: 152px;
    height: 59px;
 }

新建html

<a href="{{url}}" target="_blank"><img class="img-latam" alt="" /></a>

结果：

Answer 1

您可以使用 background-size 指定背景图像填充容器的方式。我想你想要的是这个：

  .img-latam {
    background-size: cover;
  }

您可以通过示例 here.

详细了解可以为 background-size 传递的不同值

Answer 2

  .img-latam {
background-image: url("assets/img/latam.png");
width: 152px;
height: 59px;
background-size: 100%;

}

宽度和高度将在您使用 background-size 属性

时起作用

Answer 3

你必须写在CSS:

.img-latam{
  background-image:url("assets/img/latam.png");
  background-size: 100%; 
  width: 152px; 
  height: 59px;
}

Backroung image css not work height and width properties