为什么我的背景图像会根据屏幕分辨率变大？

Question

在手机上以320×480的分辨率显示时，我的背景图片及其所包含的单词非常适合屏幕。当我在320×568的手机上看到它时，图像会变得稍大，单词的结尾会从屏幕上被切掉。在移动设备上，任何尺寸大于320×480的图片，图像都太大了。

我使用此css更改了按钮的布局，并且它起作用了，除了背景图像在320×480以上仍会稍大些。

@media (max-width: 768px) {
.btn { 
display: inline-block; 
height: 40px; 
font-size: 12px; 
width: 145px; 
min-width: 80px; 
padding: 0;margin-top: 180px; text-align: center; content: 
center; line-height: 38px;

这只是我关注的首页上的背景图片。

我尝试过：

@media (max-width: 768px) { body
{background-image: contain;


}} 

@media (max-width: 768px) {img {max-width: 100%; 
height: auto;}}

没用。

尝试：

@media (max-width: 768px) { body
{background-size: contain;
}} 

@media (max-width: 768px) {img {background-size: 
contain;}} 

不起作用。