Question

我正在为图片库构建一个响应式WP主题。响应宽度时一切正常。我尝试设置一个响应高度的屏幕尺寸，因为我的图像在1200 x 800的小型笔记本电脑上被切断了。我尝试了一些不同的东西，他们都做了我想让他们做的事，但他们改变了风格适用于每种屏幕尺寸，而不仅仅是1200 x 800。

@viewport {
    width: device-width;
}

/** 
Small Desktop < 1200px */

@media screen and (max-width: 1200px) {

    }

img {
    height: 75%;
    max-height: 650px; 
    width: 75%;
}

我也试过@media screen and (max-height: 700px)，但结果完全相同。

Answer 1

你有正确的想法，但由于@media选择器内没有CSS选择器，你的代码根本就什么都不做。此外，请确保在HTML的标题中设置元视图端口。尝试摆弄这段代码：

<html>
      <head>
           <meta name="viewport" content="width=device-width" />
           <style>
                img {
                    height: 75%;
                    max-height: 650px; 
                    width: 75%;
                }
                @media screen and (max-width: 1200px) {
                     /*This is just an example*/
                     img {
                         height: 100px;
                         max-height: 650px; 
                         width: 100px;
                     }
                }
           </style>
      </head>
      <body>
      </body>
</html>

另外，请注意@media选择器的顺序很重要。对于多种尺寸，您可以有多个@media个。只需确保如果使用max-width，则按升序排列较小的宽度（从较小的宽度到较大的宽度）。

图像响应高度

1 个答案: