css - 边距的替代填充 : auto

Question

目前正在处理默认的 Woocommerce slider ，该 slider 的图像设置了最大高度和宽度为 100% 的方形缩略图。这些图像几乎从不正方形。有些非常高或非常宽，在缩略图内的图像周围留下很多空白，这在视觉上很好。

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

示例图片(缩略图约为 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

只需添加 padding 或一个定义的宽度，就可以实现 margin auto arainges objects 而不是定义其空间占用。