Wordpress css中的横向和纵向图像大小

最好的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%;
  }

---

一种可能的修复方法可能是：

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

---

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

class=“img wrap”{
...
溢出：隐藏；
...
}

并且永远不要使用宽度=100；在img标签上这会将图像放大，变得像地狱一样模糊-这会使它看起来不专业。 我还建议将图像居中显示。为此，我使用display:table单元格；技巧，然后将左右边距设置为“自动”。为您提供的新css：

ul.products li.product img{
浮动：无；
右边距：0；
---宽度：100%；/*尝试在
ul.products li.product img
中添加
height:inherit
，我将
height:
更改为
max height:
，这似乎解决了纵横比问题，尽管它们没有居中，但这可能更容易解决。我没有注意到实时链接。对不起，我要找Marc Audet的answeR放大横向图像的最佳方法是什么，但同时保持li类以使其余数据对齐？保持
.img wrap
不变，因为它定义了图像的父容器，一个方形框，这是可以的。我现在有，但由于它设置为150x150，它会显示图像中间的边框，但如果我移除e it I需要做上述工作您需要检查样式表的媒体查询部分，请参阅更新的答案。完成了，但请注意img包装的img重叠，我已将其全部更改，这是
溢出：隐藏的
设计的目的…并不总是合适的。