Question

我在this WooCommerce-Site的问题上摸不着头脑。产品图像在桌面上看起来很好且正常，但在尺寸缩小到iPad或iPhone的尺寸时会变形和挤压。

事情是：我无法找出原因。没有媒体查询可以做到这一点，图像格式是固定的。我没看到什么？

非常感谢你看一看。

Answer 1

这是因为用于定义图像高度和宽度的单位。

我们假设你让你的图片占据了你网页div中的100像素。尽管您使用的是什么平台，它仍将保持相同的大小，并将保持相同的大小。由于移动视口，它最终会笨拙地调整大小，最终不会按计划进行。

您可以使用将单位更改为百分比或视口高度或宽度到保持相同的图像比率来解决此问题。

希望这有帮助！

Answer 2

简要回答：这是因为图像的样式是动态计算的。通常（在高分辨率下）图像具有以下样式：

.woocommerce .product-style-0 .image img {
    height: 203px;
    width: 274px;
}

这种风格显然导致图像具有固定宽度：274px和固定高度203px;

当您缩小浏览器的尺寸（小修复）时，您的元素具有风格：

.woocommerce .product-style-0 .image, .woocommerce .product-style-0 .image img, .woocommerce .product-style-1 .image, .woocommerce .product-style-1 .image img {
    height: auto;
    width: 100%;
}

这使得图像获得它所在的div容器宽度的100％。这在小分辨率下有效地占据了100％的屏幕宽度。

但这不是一个错误。您的工作基于woocommerce sollution，您获得了一个根据Responsive Web Design原则创建的模板。使用此思想创建的主题可确保模板在具有小分辨率的设备上具有良好的可用性。

使用Responsice Web Design后，您正在使用的主题会尝试使图像在小分辨率上变大，以便最终用户可以很好地阅读。

BTW：右侧的过滤菜单也隐藏在小分辨率上，以免占用宝贵的空间。

编辑：并且直截了当地说答案......如果你仍然想知道为什么画面看起来很糟糕？当它达到100％宽度时，它会重新计算并且＃34;宽度为392px（它是最宽的形式），但原始图像只有274px，因此浏览器将其扩展，从而失去质量。

无法弄清楚为什么CSS会在较小的设备上更改我的图像格式

2 个答案: