css - 如何缩小背景图片的大小？

Question

我有一张图片尺寸:240px/240px。此图片尺寸只能在宽屏上使用，在移动设备上此图片必须为 80px/80px。我曾经尝试过的:

.picture{
    height:100%;
    min-height: 240px;        
    background: url("../../img/picture.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
@media screen and (max-width: 480px) .picture {
    height: 80px;
    transform:scale(.3);
}

但是这个scale parents block，bg scaled wrong，完全正确，但这不是我需要的。这只是裁剪背景图片。

Answer 1

如果您尝试设置固定背景图片，这是缩放和对齐背景图片的示例:

.pic-wrap {
  display: block;
  height: 296px;
  background-image: url(https://pbs.twimg.com/profile_images/590966305248784384/1gX6-SY6_400x400.jpg);
  background-size: 256px;
  background-position: 20px 50%;
  background-repeat: no-repeat;
  padding-left: 296px;
  border: 1px solid #ddd;
}

@media only screen and (max-width: 320px) {
  .pic-wrap {
    background-size: 96px;
    height: 126px;
    padding-left: 126px;
  }
}

<div class="pic-wrap">
  <span class="label">Test</span>
</div>