Javascript iPhone和iPad横幅中的图像倾斜

问题：我使用以下css使转盘横幅中的图像响应：

#homepage .carousel .item { 
     height: auto;
} 
/*Carousel images are now responsive*/
#homepage .carousel .item img { 
    min-width: 100% !important; 
    max-width: 100% !important; 
    position: relative !important; 
}

这适用于PC、平板电脑和android设备

然而，对于ipad和iphone，图像是倾斜的。它似乎显示了图像的完整高度，而不是根据设备进行调整

我有以下处理iPad和iPhone的css样式表：

@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 991px) and (min-width: 768px){
    #homepage .carousel .item {
        /*height: auto !important;*/
        margin-top: 154px !important;
    }
}
@media screen and (max-width: 991px) and (min-width: 768px) and (orientation:landscape){
    #homepage .carousel .item {
        /*height: auto !important;*/
        margin-top: 20px;
    }
}
@media (max-width:961px) and (min-width: 768px) and (orientation:landscape){
    #homepage .carousel .carousel-caption { 
        top: -20px !important;
    }
}
/* Portrait and Landscape iphone*/
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:portrait) { 
    #homepage .carousel .item { height: 150px !important; /*margin-top:71px;*/}
    #homepage .carousel .item img { max-width: 100%; height: auto; display: block; }

}
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:landscape) { 
    #homepage .carousel .item { height: 250px !important; }
    #homepage .carousel .item img { max-width: 100%; height: auto; display: block; }
}

但是，我使用的js似乎不起作用：

function isApple(userAgent){
     var iPhone = userAgent.match(/iPhone/i) !== null;
     var Apple = userAgent.match(/Apple/i) !== null;
     var Mac = userAgent.match(/Mac/i) !== null;
     var iPod = userAgent.match(/iPod/i) !== null;
     var iOS = userAgent.match(/iOS/i) !== null;
          return iPhone || Apple || Mac || iPod || iOS;
        }
        // Use like this...
  if(isApple(navigator.userAgent)){ 
          document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/MuraBootstrap3/assets/bootstrap/css/iphone.css">');
        }

函数isApple（userAgent）{
var iPhone=userAgent.match（/iPhone/i）！==null；
var Apple=userAgent.match（/Apple/i）！==null；
var Mac=userAgent.match（/Mac/i）！==null；
var iPod=userAgent.match（/iPod/i）！==null；
var iOS=userAgent.match（/iOS/i）！==null；
退回iPhone | |苹果| | Mac | | iPod | | iOS；
}
//像这样使用。。。
if（isApple（navigator.userAgent））{
document.getElementsByTagName（'head'）[0].insertAdjacentHTML（'beforeend'，''）；
}

我该怎么做才能使iPhone和iPad的图像不歪斜

---

谢谢

试试

对象匹配

@brandonscript-我已经试过了，但它不适用于iPhone或iPad。感谢您的建议，如何使用背景图像和设置，以及设置

背景大小：封面？@brandonscript-我之前也试过。不知道我还能做什么