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

【问题标题】：Drupal 8 Views Slideshow Images sized incorrectly in IE 11Drupal 8 视图幻灯片图像在 IE 11 中大小不正确
【发布时间】：2017-02-17 21:27:11
【问题描述】：

现场幻灯片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>

【问题讨论】：

你必须使用那个滑块吗？
Drupal 必须原生支持它...
在 OSx Chrome 上对我来说根本没有响应。

标签： javascript jquery css drupal

【解决方案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;
}

【讨论】：

高度由 Drupal Views Slideshow 基于浏览器宽度（或在 IE 11 情况下的监视器宽度）计算，因此为所有宽度设置一个高度将不起作用。这是一个带有响应式幻灯片的响应式网站。

【解决方案2】：

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

您还需要将幻灯片容器居中对齐。现在它左对齐。对于所有浏览器，此问题都将得到解决。

【讨论】：

高度由 Drupal Views Slideshow 基于浏览器宽度（或在 IE 11 情况下的监视器宽度）计算，因此为所有宽度设置一个高度将不起作用。这是一个带有响应式幻灯片的响应式网站。

【解决方案3】：

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

【讨论】：