如何调整图像大小而不拉伸和扭曲它

Question

3

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

目前，我将其设置为中等（300x300），但当我查看网站时，缩略图的形状是不同的。因此，我设置了自定义CSS：

width: 300px; height: 270px;

现在，这些图片有了相同的大小，但其中一些看起来很糟糕。是否有一种CSS代码可以以某种方式缩放任何大小的图像，以使它们不会拉伸？因此，我不必手动在Photoshop中编辑它们，例如？

- David Barczi

可能是使用CSS实现响应式图片的重复问题。 - Mehran Prs

如果您只提供了 width 或 height，则另一个值将按比例计算。 - deEr.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Coffee bean · Accepted Answer

您可以使用object-fit属性，以使图像正确显示，无论包含框或图像的宽高比如何。这样，您就可以在任何图像中拥有统一大小的框。

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

这里有一个针对IE和Edge浏览器的Polyfill（多重填充物）。