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

Question

我对woocommerce网站上的一个问题摸不着头脑。产品图像在台式机上看起来很好很正常，但是当缩小到iPad或iPhone的尺寸时就会失真和压缩。

问题是:我找不出原因。没有媒体查询可以做到这一点，图像格式是固定的。我没看到什么?

非常感谢您的观看

Answer 1

简单地说:这是因为图像的样式是动态计算的。通常(在高分辨率下)图像有以下样式:

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

这个样式显然使图像具有固定的宽度:274px和固定的高度203px;

当你缩小你的浏览器(小分辨率)，你的元素有style:

.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解决方案的商店，你获得了一个模板，这是根据响应式网页设计原则创建的。使用这个想法创建的主题确保模板在小分辨率的设备上具有良好的可用性。

作为使用响应网页设计的结果，你正在使用的主题试图使图像大，小分辨率，以便它是很好地读给最终用户。

顺便说一句:右边的过滤菜单也隐藏在小分辨率，为了不消耗宝贵的空间。

编辑:并使答案直截了当....如果你还在想为什么照片看起来很糟糕?好吧，当它得到100%的宽度时，它会被"重新计算"到392px的宽度(这是最宽的形式)，但原始图像只有274px，所以浏览器会缩放它，从而失去质量。

Answer 2

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

让我们假设你让你的图像在你的页面的div内占用100像素。无论您使用的是什么平台，它的大小都将保持不变。由于移动视口的原因，它最终会笨拙地调整大小，最终看起来不像计划的那样。

你可以通过将单位更改为百分比或视口高度或宽度以保持相同的图像比例来解决这个问题。

希望有帮助!