css - 如何在不拉伸(stretch)和扭曲图像的情况下调整图像大小

Question

我希望我的图像在任何设备上看起来都不错。在我的主页上，我使用 ContentViews 插件列出最新发布的文章。在插件的设置中，我可以将缩略图设置为不同的大小。

目前我将其设置为中等 (300x300)，但是当我查看网站时，缩略图的形状各不相同。所以我设置了一个自定义 css:

width: 300px; height: 270px;

现在图像大小相同，但其中一些看起来很糟糕。是否有 css 代码以某种方式缩放任何大小的图像，所以它们看起来不会拉伸(stretch)？例如，我不必在 PS 中手动编辑它们？

我的网站:http://slovosalanov.sk/test/

Answer 1

您可以使用 object-fit属性以正确显示图像，而不管包含框或图像的纵横比如何。这样您就可以拥有大小统一的盒子，里面可以放任何图片。

.pt-cv-wrapper img {
    object-fit: cover;
}

这是一个polyfill for IE and Edge.