Css 将WooCommerce产品图像缩小到移动视图中？

我在一个小项目上工作，当从移动视图中看到产品图像时，需要将其缩小。目前图像太大，彼此之间的间距（我有两个产品在同一条线上）太小，所以希望将它们分开，以便客户能够更好地了解产品

我尝试使用图像CSS，如下所示：

@media only screen and (max-width: 600px) {
.woocommerce ul.products li.product a img {
    height:265px; //to make image smaller so can get more spacing between.
}
}

---

但这似乎会使图像变小，但也会将其切断，所以这不好。有人能帮助我，如何使图像更小，但图像不裁剪？来自站点的示例。

大多数电话设备的宽度小于等于425px。因为您的图像是硬编码的，所以我也将提供一个硬编码的解决方案

@media only screen and (max-width: 425px) {
  .woocommerce ul.products li.product a img {
    height: 200px;
    width: 70%;
    margin: 0 auto;
  }
}

可以根据需要调整这些值

---

您需要相应地调整高度和宽度，以不切断图像

大多数手机设备的宽度小于等于425px。因为您的图像是硬编码的，所以我也将提供一个硬编码的解决方案

@media only screen and (max-width: 425px) {
  .woocommerce ul.products li.product a img {
    height: 200px;
    width: 70%;
    margin: 0 auto;
  }
}

可以根据需要调整这些值

---

您需要相应地调整高度和宽度，以不切断图像

经验法则是让浏览器自己尽可能多地渲染，以保持响应性并保持性能。你自己做的越多，你的网站就越不适合你

使用flex Box可使此功能非常方便：

@仅媒体屏幕和（最大宽度：500px）{
.项目{
最大宽度：150px；
}
}
.项目{
最大宽度：200px；
}
#容器{
显示器：flex；
柔性包装：包装；
}
img{
宽度：100%；
}

---

经验法则是让浏览器自己尽可能多地渲染，以保持响应速度并保持性能。你自己做的越多，你的网站就越不适合你

使用flex Box可使此功能非常方便：

@仅媒体屏幕和（最大宽度：500px）{
.项目{
最大宽度：150px；
}
}
.项目{
最大宽度：200px；
}
#容器{
显示器：flex；
柔性包装：包装；
}
img{
宽度：100%；
}

您需要在

@media

查询中同时修改

高度

和

宽度

。然后考虑使用<代码> Flex Box ，或者修复边距以对齐项目。使用正确的代码？您需要在

@media

查询中同时修改

高度

和

宽度

。然后考虑使用<代码> Flex Box ，或者修复边距以对齐项目。有正确的代码吗？这是一个通用的解决方案，它不会与他的主题一起工作。@onyx很好！我只是不知道他是被迫使用列表的特定方法的。这是一个通用的解决方案，对他的主题不起作用。@onyx很好！我只是掩盖了他是被迫使用列表的特定方法的。