Drupal 8 Views幻灯片在IE 11中图像大小不正确

Question

直播幻灯片https://www.baywaycopperalloys.com

以下样式尺寸Drupal 8 Views Slideshow可在除IE 11之外的所有浏览器中正确滑动。.img-responsive是应用的选择器。

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

可以使用max-width:100vw更正宽度，但是元素上内嵌的javascript设置的容器高度不正确。

如何使用Views Slideshow在IE 11中获得正确的100％宽度和自动高度？

<div id="views_slideshow_cycle_div_home_slider-block_1_1" class="views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 1903px; height: 464px;">
  <div class="views-row views-row-1 views-row-even">
    <div class="views-field views-field-field-slide-image">
      <div class="field-content">
        <img src="/sites/bayway/files/2017-02/banner-2.jpg" width="2200" height="536" alt="Bayway Copper Alloys" typeof="foaf:Image" class="img-responsive">
      </div>
    </div>
    <div class="views-field views-field-field-display-order">
      <div class="field-content">2</div>
    </div>
  </div>
</div>

Answer 1

首先从视图中删除包含整个滑块的.form组（您可以使用重写输出或在模板中），因此控件将居中

然后尝试这个，并告诉我滑块控件是否有效

.views_slideshow_main{
    height:310px
}
.view-home-slider .img-responsive {
    height:300px;
    max-width: 100vw;
}
.views-slideshow-controls-bottom{
    z-index: 9999999999999;
    position: relative;
}

Answer 2

您可以将图像样式应用于幻灯片中的图像。现在556px的图像高度。这就是在IE中渲染它的自动高度。如果应用了图像样式，那么它将在所有浏览器中保持一致。

您还需要将幻灯片放映容器对齐到中央。现在它左对齐。有了这个问题，将解决所有浏览器。

Answer 3

随着Flexslider团队的更新到8.x-2.0-alpha2，所有浏览器都解决了这个问题。我们替换了8.x-2.x-dev模块文件并添加了Flexslider库文件并完成了！