Jquery 仅在一个场景中，响应性图片无法很好地显示

我有一个jQuery脚本，当点击图标图片时，脚本会检查图标是纵向还是横向，然后打开同一张图片，但更大。为了使其对小屏幕具有响应能力，无论设备处于纵向模式还是横向模式，较大的图片都应该完全适合，而不会丢失其比例

$(".imageInner").click(function() {
    var imgRatio = ($(this).width() / $(this).height());
    var imgClass = (imgRatio > 1) ? 'landscape' : 'portrait';
    $(".viewImage").addClass(imgClass);
    var imgsrc = $(this).attr("src").match(/[^\.]+/) + "_B.jpg";
    $(".viewImage").append("<img src=' " + imgsrc + " '/>");
    $(".xButton").fadeIn(2000); 
});

$(".xButton").click(function() { //this is to close the picture div
    $(".pageOuterContainer").show();
    $(".xButton").hide();
    $(".viewImage_Container").toggle("slow");
    $(".viewImage").empty(); 
    });

除了在一个场景中，脚本在任何时候都运行良好。如果在设备屏幕处于纵向模式时单击横向图片，则大图片显示良好。但是如果我点击了一张肖像画，大图就错了。换句话说，只有在单击横向图标（当设备处于纵向模式时）后，单击纵向图标时，才会发生此错误

有没有关于如何停止此错误的提示？剧本在什么地方囤积了吗

---

提前感谢

我想你的问题是永远不要从

中删除类横向和纵向

顺便说一句，我认为这是可以解决的，不需要区分肖像和风景，特别是如果你没有问题加载你的图像作为背景图像

在这种情况下，您可以添加
背景大小：contain至
。查看图像
。使用此属性，背景图像始终适合容器而不会丢失比率

.viewImage { display: inline-block; text-align: center;  vertical-align: middle; } 


@media only screen and (orientation:landscape)  
{   
    .portrait { height: 100%; width: 99%;}
    .portrait img {height: 100%;  width: auto; }
    .landscape { height: 100%; width: 99%;}
    .landscape img {height: 100%;  width: auto; } 
} 


@media only screen and (orientation:portrait)
{   
    .portrait { height: 100%; width: 99%;}
    .portrait img {height: 100%;  width: auto; }
    .landscape { height: auto; width: 99%; }
    .landscape img { height: auto; width: 100%; } 
}