使缩略图垂直后，图像比 flex-viewport 更宽

Posted 2023-03-29

【中文标题】使缩略图垂直后，图像比 flex-viewport 更宽

【英文标题】：Image wider than flex-viewport after making thumbnails vertical

【发布时间】：2021-05-22 11:37:12

【问题描述】：

我对 Woocommerce 和 FlexSlider 产品库中的图片大小有疑问。

我正在使用免费的 Astra 主题。我找到了使缩略图在产品图像左侧垂直的代码。

.woocommerce-product-gallery 
    display: flex;


.woocommerce-product-gallery .flex-control-thumbs 
    order: -10;


.woocommerce div.product div.images .flex-control-thumbs li 
    width: 100%;

现在缩略图在左侧看起来不错。

但这就是问题所在。图像（现在在缩略图的右侧）不完全可见。

图像显示在 div.flex-viewport 中：

<div class="flex-viewport" style="overflow: hidden; position: relative; height: 554.45px;">

    <figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">

        <div class="woocommerce-product-gallery__image flex-active-slide" data-thumb="http://localhost/site01/wp-content/uploads/prod01.jpg" data-thumb- style="position: relative; overflow: hidden; width: 554.45px; margin-right: 0px; float: left; display: block;" </div>

当我检查元素时，它比第一个元素宽。

它更宽了，因为现在缩略图在左侧占据了一些空间。 flex-viewport 现在比以前更窄了，但图像的宽度与缩略图位于活动产品图像下方时的宽度相同。

我发现当我将上面的宽度从 1000% 更改为 100% 并更改最后一个 div 自动的宽度时，图像可以正确显示。但是因为我已经将 1000% 更改为 100% 其他图像当我点击缩略图时，画廊中的内容不显示。它显示为空白。

所以我需要让活动幻灯片与 flex-viewport 具有相同的宽度（孩子与祖父母的宽度相同，而不是与父母的宽度相同）。

我一直在尝试解决这个问题，但没有成功。

有人可以帮我吗？

问候....

【参考方案1】：

同样的问题，似乎还没有人找到解决方案。他们甚至在没有解决方案的情况下关闭门票：D 其他线程： https://wordpress.org/support/topic/woocommerce-image-gallery-bug-on-firefox/ https://wordpress.org/support/topic/wider-product-images-cut-off-on-right-but-only-with-firefox/

FF 和 Chrome 的 Figure 元素有所不同。 FF：

<figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(-749px, 0px, 0px);padding: 0;margin: ;">

铬：

<figure class="woocommerce-product-gallery__wrapper" style="width: 1000%; transition-duration: 0s; transform: translate3d(-624px, 0px, 0px);">

它应该是translate3d(-624px,，就像在 Chrome 中一样，但不知何故计算不正确。

【参考方案2】：

首先：视口宽度必须是缩略图宽度的 100%MINUS。

例如，如果缩略图的宽度为 20%，则视口必须为 80% 才能适应！

查看这个不错的教程：https://www.businessbloomer.com/woocommerce-display-product-gallery-vertically-single-product/

第二：之后你会注意到一个问题只发生在 firefox 中：图像将保持 100%，而视口将保持 80%。

要更正您需要从 woocommerce/assets/js/flexslider/jquery.flexslider.min.js 覆盖缩小的 jquery 文件：

我改变了这个：m.isFirefox&&(m.w=m.width())

对此：m.isFirefox&&(m.w=m.viewport())

图像将使用视口的宽度代替整个滑块。

希望这能有所帮助！它非常适合我！