Question

目前正在使用默认的Woocommerce滑块，该滑块具有方形缩略图，其最大高度和宽度设置为100％。这些图像几乎不是正方形。有些非常高或非常宽，在缩略图内的图像周围留下了很多空白区域，这在视觉上很好。

问题是您必须单击图像才能选择幻灯片。这意味着小图像会导致大量的错误点击和挫败感。有没有办法设置填充填充图像周围的空白区域？例如margin:auto;就像。{/ p>

示例图像（缩略图大约75x75像素）：

这些是我添加的CSS样式，用于使图像以缩略图为中心，并对活动状态进行一些其他微调：

.flex-control-thumbs {

            li {
                position: relative;
                width: 21.25%!important;
                margin-right: 5%!important;
                border-width: 1px;
                border-style: solid;
                border-color: $light-gray;
                transition: border-color 0.15s ease-in-out;
                overflow: hidden;
                background-color: $white;

                &:nth-child(4n) {
                    margin-right: 0!important;
                }

                &.flex-parent-active {
                    border-bottom-width: 3px;
                    border-bottom-color: $primary-color;
                }

                img {
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    max-height: 100%;
                    padding: 5px;

                    &.flex-active:after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 3px;
                        background-color: $primary-color;
                    }
                }
            }
        }

Answer 1

只需添加填充或定义的宽度即可进行技巧余量自动排除对象不定义其占用空间。

Answer 2

您可以尝试为缩略图div设置固定宽度，然后为它们设置背景图像，或者更好，只需将缩略图图像编辑为相同尺寸。这样你就可以拥有高大的图像，但它们也可以自然地包含两侧的额外空间，无论是透明的png还是相同的背景颜色jpg

填充替代保证金：自动

2 个答案: