图像拉伸在手机方向改变

Question

我为网络项目制作了一个广告滑块。我使用了www.basic-slider.com的基本jQuery滑块。它允许我在JavaScript文件中设置以下内容：

$('#banner-fade-left').bjqs({
    height      : 482,
    width       : 482,
    responsive  : true,

包含广告的div的宽度设置为50％。

<div style="max-width:50%; float:left">
    <div id="banner-fade-left">
        <ul><li>AD HERE</li></ul>
    </div>
</div>
 <div style="max-width:50%; float:left">
    <div id="banner-fade-left">
        <ul><li>AD HERE</li></ul>
    </div>
</div>

div中的链接和图像以这种方式格式化：

li.bjqs-slide a {
height: auto !important;
width: auto;
}

li.bjqs-slide a img {
height: auto !important;
width: 100%;    
}

输出是2个横幅，宽度为482像素并排放置在页面上。 （见www.solaire.com）

在移动浏览器上查看网站时会出现图像拉伸问题。首次加载（纵向视图）时，广告的尺寸是正确的。但是当您将手机的方向更改为风景时，会发生以下情况：

如您所见，图像看起来是水平压缩的。 当您再次将其更改为肖像时，图像会伸展出来：

高度设置为 auto！important ，宽度设置为100％以始终占用整个div。但似乎高度并不总是相对于图像的宽度适当调整。每次方向改变时，图像都会继续拉伸。当您快速调整浏览器的宽度时，桌面浏览器上会发生同样的事情。

我该如何解决这个问题？

Answer 1

您可以在css中使用媒体查询，如下所示：

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

或在您的javascript文件中：

   var mql = window.matchMedia("screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape)");
if (mql.matches){