图像响应高度

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 的 header 中设置元视图端口。尝试使用此代码fiddle：

<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，您的宽度会按升序排列（从较小的宽度到较大的宽度）。

图像响应高度

images responsive to height

css

wordpress

image

responsive-design