Question

如果我有网址：http://imageurl/image.jpg?w=160&h=160 有没有办法为background-image指定width和height参数：url与其他div的高度和宽度？

  .thumb{
        border:1px solid red;
        display:inline-block;
        height:300px;
        width:300px;
    }

    .thumbnail{
        background-size:100% 100%;
        background-repeat:no-repeat;
        background-image:url(http://imageurl/image.jpg?w=thumb.width&h=thumb.height)   
    }

Answer 1

使用标准css是不可能的，这是静态的。所以你需要javascript或css预处理器，如http://lesscss.org/。所以你可以使css动态化。

Answer 2

您可以使用背景图像的实际图像整数并将图像设置为使用object-fit: cover;

＆＃13;

.thumb{
  border:1px solid red;
  display:inline-block;
  height:300px;
  width:300px;
}
    
img.thumbnail{
   width: inherit; height: inherit;
   object-fit: cover;
}

＆＃13;

<div class="thumb">
  <img src="https://placehold.it/400x600" class="thumbnail">
</div>

＆＃13;

在运行时css更改background-image：url的参数

2 个答案: