wordpress - css 中的横向和纵向图像大小

Question

最好的 CSS 是什么来显示我的类别图像，以免它们被压扁或显示扭曲。

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

Live Link

我可以更改 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;
}