如何減少背景圖片的大小？

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