Question

我有一个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(); 
    });

这是css文件

.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%; } 
}

除了一个场景外，该脚本始终可以很好地运行。如果在设备屏幕处于纵向模式时单击横向图片，则可以很好地显示大图。但如果我点击肖像照片，那么大图片就会放错地方。换句话说，只有当我点击一个人像图标（当设备处于纵向模式时）点击一个人像图标时才会出现此错误。

有关如何停止此错误的任何提示？脚本是否存放在某个地方？

提前致谢

Answer 1

我认为您的问题是永远不要从.viewImage删除类格局和肖像。

顺便说一下，我认为它可以在不需要纵向和横向之间的差异的情况下解决，特别是如果你没有将图像加载为背景图像的问题。

在这种情况下，您可以将background-size: contain;添加到.viewImage。使用此属性，背景图像始终适合容器而不会丢失比率。

响应式图片仅在一个场景中显示不佳

1 个答案: