基于移动方向的图像高度

Question

我的小型移动图片库存在问题。当我将方向更改为纵向时，图像太大而无法在屏幕上显示。

当方向更改为纵向时，是否可以使用某些javascript使图像适合屏幕？
在横向模式下，一切看起来都很好。

Answer 1

是的，您可以在不使用JavaScript的情况下使用CSS3 Media Queries。

@media screen and (max-width: 450px) {
    img {
        width: 30%;
    }
}

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Answer 2

试试这个：

@media screen and (orientation:portrait) {
    //your css code goes here
}

@media screen and (orientation:landscape) {
    //your css code goes here
}