响应调整图片大小

问题描述：

我有CSS代码这样的宽度小于479px响应调整图片大小

@media (min-width: 320px) and (max-width: 479px) { 
    .pi-hidden-2xsx-only { 
    max-width: 5px; 
    max-height: 5px; 
}

和我的图像源使用类这样

<a href="index.html"><img src="img/logo.png" alt="" class="pi-hidden-2xsx-only"></a>

为什么当我加不工作这个课程在我的图片源？当我的移动设备小于宽度时，我的图像应该自动调整大小以适应我应用的规则。

这是一个简单的错字，你忘了添加正确的结束标签？在你的例子中，你需要在你的css结尾处增加一个'}'。此外，您的媒体查询设置为320px - 479px，而不是320px。 – thepio

你正在关闭你的媒体查询吗？用“}” – Ricky

答

这可能是因为你是在一个错误的方式css文件编写类...

正确的方法是使用标记名(img)类名像以前一样

@media (min-width: 320px) and (max-width: 479px) { 
    img.pi-hidden-2xsx-only { 
    max-width: 5px; 
    max-height: 5px; 
}

唯一的变化pi-hidden-2xsx-only.img到img.pi-hidden-2xsx-only

这是不对的。只有班级名称才可以选择。 –

是的，这是有效的。我只是试过， –

你不能添加类名并在此之后写标签名。是的，只有类名可以选择。但是你写错了方式 –

答

我有CSS代码这样对于宽度小于320像素

媒体查询应该是：

@media (max-width: 320px) { 
    .pi-hidden-2xsx-only{ 
     /* your css */ 
    } 
}

我改变了，但它仍然没有改变我的图像大小 – user2422414

答

先给这样的代码

@media screen and (min-width: 320px) { 
    img.pi-hidden-2xsx-only { 
     max-width: 5px; 
     max-height: 5px; 
    } 
}

或

@media only screen and (max-width: 479px) { 
    img.pi-hidden-2xsx-only { 
     max-width: 5px; 
     max-height: 5px; 
    } 
}

，并试图改变max-width和max-height到width和height