如何在不拉伸和扭曲图像的情况下调整图像大小
How to resize the image without stretching and distorting it
我希望我的图像在任何设备上看起来都不错。在我的主页上，我使用 ContentViews 插件列出最新发布的文章。在插件的设置里我可以设置不同大小的缩略图。
目前我将其设置为中等 (300x300)，但当我查看该网站时，缩略图的形状各不相同。所以我设置了自定义 css:
width: 300px; height: 270px;
现在图片大小一样了，但是有些看起来很糟糕。是否有 css 代码以某种方式缩放任何尺寸的图像，使它们看起来不会被拉伸？所以我不必在 PS 中手动编辑它们，例如？
您可以使用 object-fit 属性 来正确显示图像，而不管包含框或图像的纵横比如何。这样你就可以拥有统一大小的盒子，里面有任何图片。
.pt-cv-wrapper img {
object-fit: cover;
}
我希望我的图像在任何设备上看起来都不错。在我的主页上，我使用 ContentViews 插件列出最新发布的文章。在插件的设置里我可以设置不同大小的缩略图。
目前我将其设置为中等 (300x300)，但当我查看该网站时，缩略图的形状各不相同。所以我设置了自定义 css:
width: 300px; height: 270px;
现在图片大小一样了，但是有些看起来很糟糕。是否有 css 代码以某种方式缩放任何尺寸的图像，使它们看起来不会被拉伸？所以我不必在 PS 中手动编辑它们，例如？
您可以使用 object-fit 属性 来正确显示图像，而不管包含框或图像的纵横比如何。这样你就可以拥有统一大小的盒子，里面有任何图片。
.pt-cv-wrapper img {
object-fit: cover;
}