如何用 CSS 编写媒体查询？

我需要在以下情况下编写不同的样式

设备宽度大于设备高度

/* Landscape */
@media screen and (orientation:landscape) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

设备高度大于设备宽度

/* Portrait */
@media screen and (orientation:portrait) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

方向在调整浏览器大小的某些阶段不能完美工作。

如何编写正确的CSS？

用 CSS 可以做到吗？

EDIT :

I am attaching image how it looks on resizing the browser

您可以访问浏览器的纵横比 http://en.wikipedia.org/wiki/Aspect_ratio_%28image%29具有这些媒体查询功能：aspect-ratio | min-aspect-ratio | max-aspect-ratio。欲了解更多信息，请查看CSS 媒体查询 https://developer.mozilla.org/en-US/docs/CSS/Media_queries on MDN.

肖像的长宽比大于1:1且景观较少。为了验证，我做了一个JSFiddle http://jsfiddle.net/ansonhoyt/JPpzb/embedded/result/当您从“横向”切换到“纵向”时，它会改变颜色。

尝试这个：

/* Landscape (i.e. wide viewport) */
@media screen and (min-aspect-ratio: 1/1) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

/* Portrait (i.e. narrow viewport) */
@media screen and (max-aspect-ratio: 1/1) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

Update:图像是文档流的一部分，不会填充视口，除非正文也填充视口body {height: 100%;}，就像在这个JSFiddle http://jsfiddle.net/ansonhoyt/JPpzb/1/.

Try img {position: absolute;}将图像从流动中拉出来，因此它的尺寸不受身体尺寸的限制。看JSFiddle http://jsfiddle.net/ansonhoyt/JPpzb/3/.