如何减少背景图片的大小？

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); 
} 

但是这种规模的父母阻止，BG比例不对，完全正确的，但是这不是我所需要的。这只是作物bg图片。

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>

Answer 2

你缺少对媒体查询{}括号：

.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) { /* here */ 
     .picture { 
     height: 80px; 
     transform:scale(.3); 
     } 
    } /* here */ 

Answer 3

试试这个 -

.picture{ 
    height:100%; 
    min-height: 240px;   
    background: url("../../img/picture.png") no-repeat; 
    background-size: 100% 100%; 
    background-position: 50% 50%; 
} 

@media screen and (max-width: 480px){ 
    .picture { 
     height: 80px; 
     min-height: none; 
     transform:scale(.3); 
    } 
}