如何在不拉伸和扭曲的情况下调整图像大小 [英] How to resize the image without stretching and distorting it

问题描述

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

I would like my images to look good on any device. On my homepage I'm using ContentViews plugin to list the latest articles posted. In the settings of the plugin I can set the thumbnail to be different sizes.

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

Currently I set it to medium (300x300), but when I looked at the site, the thumbnails were in different shapes. So I set a custom css:

宽度:300px；高度:270px;

width: 300px; height: 270px;

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

Now the images have the same size, but some of them look bad. Is there a css code to somehow scale the images of any sizes, so they don't look stretched? So I don't have to manually edit them in PS, for example?

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

推荐答案

您可以使用 object-fit 属性可以正确显示图像，而不管包含框或图像的纵横比如何.通过这种方式，您可以拥有带有任何图像的统一大小的盒子.

You can use the object-fit property to display the image correctly regardless of the aspect ratio of the containing box or image. This way you can have uniform sized boxes with any image inside.

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

这是一个用于 IE 和 Edge 的 polyfill.

Here is a polyfill for IE and Edge.

这篇关于如何在不拉伸和扭曲的情况下调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！