Question

我从事的是小型项目，需要从移动视图看时缩小产品图片。当前图像太大，彼此之间的间距（我在同一行中有两个产品）太小，因此希望将它们分开，以便客户可以更好地了解产品。

我尝试使用图像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.
}
}

但是，这似乎会使图像变小，但也将其剪切掉，因此不可行。有人可以帮我，如何缩小图像，但图像不裁剪？来自站点here的示例。

Answer 1

一个经验法则是让浏览器自己尽可能多地呈现，保持响应并保持性能。您做得越多，您的网站就越不适合您。

使用弹性盒非常方便：

@media only screen and (max-width: 500px) {
  .item {
   max-width: 150px;
  }
}

.item {
   max-width: 200px;
  }


#container { 
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 100%;
}

<div id="container">
      <div class="item">
      <img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
      </div>
      <div class="item">
        <img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
      </div>
        <div class="item">
        <img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
      </div>
        <div class="item">
        <img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
      </div>
        <div class="item">
        <img src="https://reinigungsmittel-grass.de/wp-content/uploads/2018/06/Carwash-foam_20-500x597.png">
      </div>
    </div>

注意：当您的分辨率大于500px时，所有此类框的最大宽度为200像素，如果较小，则缩小为150px。该框中的所有内容都会调整大小，并且通过将图像宽度设置为100％，它也会根据其父框中的大小进行调整。这样，您就不必在CSS和html上弄乱所有这些值。

当然，您可以像在一边一样用百分比替换像素值，从而获得想要的样式。

以下是有关弹性盒的一个很好的摘要，您可以使用它们做些什么：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

大多数电话设备的宽度为425px或更小。因为您的图片是硬编码的，所以我还将提供硬编码的解决方案

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

您可以根据需要调整值。

您需要相应地调整高度和宽度，以免剪切图像。

将WooCommerce产品图片缩小到移动视图？

2 个答案: