Question

我有一个图像，我正在调整其容器的百分比，我想要做的是在容器更大（窗口最大）时降低该百分比，并在窗口缩小时更高的数字。

而不是使用某种类型的开关或多个if语句编写脚本我想知道是否有人对可能的数学公式解决方案有任何想法。

例如，宽度为1080px的结果为1％和宽度为358px将有5％

Answer 1

您应该可以使用不同宽度尺寸的媒体查询。实际上没有神奇的数学公式。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

使用以下媒体查询来实现此目的：

@media only screen and (max-width: xxxpx) and (min-width: yyypx){
      #container img{
        width: z%;
      }
    }

示例：

@media only screen and (max-width: 400px) {
          #container img{
            width: 5%;
          }
        }

@media only screen and (max-width: 1000px) and (min-width:401px){
          #container img{
            width: 3%;
          }
        }

@media only screen and (min-width:1001px){
          #container img{
            width: 1%;
          }
        }

将像素值替换为所需的值，并根据需要设置多个范围

有关媒体查询的更多信息请阅读： http://css-tricks.com/css-media-queries/

动态调整图像大小

2 个答案: