Question

我正在设置一个网站，我的图片大小不同，因为它们是不同的广告尺寸，即300×600,728×90,320×50等。在此页面上。你会看到它会短暂地显示适当大小的完整图像（即你可以看到缩小的图像），但随后它会缩放以适应裁剪尺寸，一些图像会完全消失。

我每次都尝试更改尺寸，硬裁剪和重新缩放缩略图，但我无法让它们看起来正确。我们该怎么做呢？ https://fullforceads.com/product-category/ads/static-ads/series1s/

当页面首次绘制时，我看到它们有足够的空间，但随后它会放大每个缩略图，但我无法看到导致它的原因。我查看了开发人员的工具，但认为我遗漏了一些基本的东西。我找了一个插件，它会在上方和下方添加空格，但找不到任何内容。

Answer 1

你的CSS就是问题所在。我检查了你的图像，我发现了这个：

.products .product .thumb-image, .products .product .hover-image {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

background-size: cover;是这里的问题，因为它试图将图像向上缩放，以便填满整个空间。如果您将该设置更改为contain，则图片将尽可能大，而不会裁剪：

.products .product .thumb-image, .products .product .hover-image {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

首先正常显示图像然后按比例放大的原因如下：如果您的网络服务器很慢或者您的CSS文件非常大或者CSS加载严重，那么CSS规则需要时间才能生效。这导致首先正常显示图像，然后CSS启动并且图像按比例放大。正如我所描述的那样更改CSS应该解决这个问题。

我不知道您的设置，但您可能需要在主题设置中插入CSS或创建子主题，具体取决于主题。

Woocommerce Aspect Ration和空白

1 个答案: