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