响应式图像调整大小

Question

我有这样的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>

为什么在我的图像源中应用此类时它不起作用？当我的移动设备小于宽度时，我的图像应该自动调整大小以适应我应用的规则。

Answer 1

  

我有这样的css代码，宽度小于320px

媒体查询应为：

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

Answer 2

尝试提供这样的代码

@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

Answer 3

这可能是因为您正在以错误的方式在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