2

最好的 CSS 是什么来显示我的类别图像，这样它们就不会被压扁或显示失真。

图像本身是 1024 x 768，即使将 Wordpress/Woocommerce 设置为 400 x 400 的缩略图，然后在重新生成缩略图后仍然是相同的：

实时链接

我可以更改 CSS 但不能更改 HTML。

CSS： 

ul.products li.product .img-wrap {
  position: relative;
  margin: 0 0 1em;
  padding: 3px;
  background: #fff;
  border: 1px solid #e1e1e1;
  height: 150px;
  width: 150px;
}

  ul.products li.product img {
    float: none;
    margin-right: 0;
    width: 100%;
  }
4

2 回答 2

2

一种可能的解决方法可能是：

ul.products li.product img {
    float: none;
    width: auto;
    margin: 0 auto;
}

这适用于纵向样式的缩略图，但不确定横向样式。

您在这里想要的是让缩略图适合 150x150 框，无论缩略图图像的纵横比如何。

在 woocommerce.css 的第 534 行，声明如下：

ul.products li.product img {
    display: block;
    height: 150px;
    width: 150px;
}

我会简单地删除高度/宽度值或将它们设置为自动。这将允许图像缩放以适合父容器。

Wordpress 也在使用媒体查询，因此 CSS 将 img 的宽度/高度设置在多个位置。例如，查看 1968 行附近的样式：

ul.products li.product img {
    float: none;
    margin-right: 0px;
    width: auto;
    margin: 0 auto;
    max-height: 150px;
    max-width: 150px;
}
于 2013-05-09T19:32:43.467 回答
0

似乎您已经解决了比率问题，但我看到至少有一个图像从容器中流出。要解决此问题，请使用溢出扩展您的img-wrap类：隐藏

class="img-wrap" {
  ...
  overflow:hidden;
  ...
}

并且永远不要使用 width=100; 在 img 标签上！这会炸毁图像并像地狱一样模糊 - 这会阻止它看起来很专业。我还建议将图像居中显示。为此，我使用 display:table-cell; 技巧，然后将左右边距设置为自动。为您准备的新 CSS：

ul.products li.product img {
  float: none;
  margin-right: 0;
  ---width: 100%; /*<- remove this line to unblury your image*/
  background-position: center;
  display: table-cell; /* display trick to enable centering by margin*/
  margin-left: auto;
  margin-right: auto;
}
于 2013-05-09T20:06:28.540 回答