Question

显示我的类别图像最好的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%;
  }

Answer 1

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

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;
}

Answer 2

好像你已经解决了比率问题，但我看到至少有一张图像流出了容器。要解决此问题，请使用溢出：隐藏

扩展 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;
}

景观和肖像图像大小在CSS内

2 个答案: