您可以使用此选项：

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

您可以使用：-

transform: scaleX(1.2);

以改变宽度而不改变高度。

And

transform: scaleY(1.2);

更改高度而不更改宽度

您可以在html和css中的图像和视频标记上使用此选项。这也不会改变纵横比。

您可以将容器设置为显示：伸缩和对齐项目：居中（其他对齐项目值也适用）。您也可以在图像本身上设置对齐自身，而不是对齐项目。

要强制图像符合精确的大小，您不需要编写太多代码。太简单了

国际货币基金组织{宽度：200px；高度：自动；对象拟合：包含；/*按图像大小调整徽标*/-o-object-fit:contain；/*为opera浏览器安装徽标*/对象位置：顶部；/*设置徽标位置*/-o对象位置：顶部；/*opera浏览器的徽标位置*/}<img src=“http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png“alt=”徽标“>

下面的解决方案将允许图像的放大和缩小，具体取决于父框的宽度。

所有图像都有一个固定宽度的父容器，仅用于演示。在生产中，这将是父框的宽度。

最佳实践（2018）：

此解决方案告诉浏览器以最大可用宽度渲染图像，并以该宽度的百分比调整高度。

.父级{宽度：100px；}国际货币基金组织{显示：块；宽度：100%；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><div class=“parent”><img width=“400”height=“400”src=“https://placehold.it/400x400"></div>

更新颖的解决方案：

使用更高级的解决方案，无论图像大小如何，您都可以裁剪图像，并添加背景色来补偿裁剪。

.父级{宽度：100px；}.容器{显示：块；宽度：100%；高度：自动；位置：相对；溢出：隐藏；填充：34.37%0 0；/*34.37%=100/（w/w）=100/*/}.容器img{显示：块；最大宽度：100%；最大高度：100%；位置：绝对；顶部：0；底部：0；左：0；右：0；}<p>此图像最初为640x220，但应通过CSS调整大小：</p><div class=“parent”><div class=“container”><img width=“640”height=“220”src=“https://placehold.it/640x220"></div></div>

对于指定填充的行，需要计算图像的纵横比，例如：

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充=34.37%。

全屏演示：

img[data-attribute] {height: 100vh;}

请记住，如果观察端口高度大于图像，则图像将相对于差异自然降级。