目前，对于固定大小的图像（如JPEG或PNG文件），无法以确定性的方式正确执行此操作。

要按比例调整图像大小，必须将高度或宽度设置为“100%”，但不能同时设置两者。如果将两者都设置为“100%”，则图像将被拉伸。

选择高度还是宽度取决于图像和容器尺寸：

如果您的图像和容器都是“肖像形状”或“风景形状”（分别比它们宽或宽），那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的，而容器是横向的，则必须在图像上设置height=“100%”。如果图像是横向的，而容器是纵向的，则必须在图像上设置width=“100%”。

如果您的图像是SVG，这是一种可变大小的矢量图像格式，则可以自动展开以适应容器。

您只需确保SVG文件中没有在<SVG>标记中设置这些财产：

height
width
viewbox

大多数矢量绘图程序在导出SVG文件时都会设置这些财产，因此每次导出时都必须手动编辑文件，或者编写脚本来进行编辑。

本文可能会帮助您：

.方形{位置：相对；宽度：300px；高度：300px；溢出：隐藏；}国际货币基金组织{位置：绝对；最大宽度：100%；宽度：100%；高度：自动；顶部：50%；左：50%；转换：转换（-50%，-50%）；}img.景观{高度：100%；宽度：自动；}<div class=“square”><img src=“https://unsplash.it/400/500“alt=”图像“/></div><div class=“square”><img src=“https://unsplash.it/500/400“class=”landscape“alt=”图像“/></div>

简单的CSS解决方案：如何将不同尺寸的图像放在集合容器中（2017-05-01）

.方形{位置：相对；宽度：441px；高度：200px；溢出：隐藏；边框：1px实心黑色；}国际货币基金组织{最大宽度：100%；/*宽度：100%*/<----它拉伸图像并适合父对象高度：自动；/*转换：转换（-50%，-50%）*/<-----设置垂直和水平中心}img.景观{高度：100%；宽度：自动；}<div class=“square”><img src=“https://cdn.pixabay.com/photo/2020/08/28/12/32/man-5524488__340.jpg“alt=”图像“/></div>

我有更好的解决方案，不需要任何JavaScript。它反应灵敏，我经常使用它。通常需要将任何纵横比的图像与具有指定纵横比的容器元素相匹配。必须让这一切都能完全响应。

/*仅用于此演示*/.容器{最大宽度：300px；边距：0自动；}.img框架{方框阴影：3px 3px 6px rgba（0，0，0、.15）；背景：#ee0；边距：20px自动；}/*这适用于具有指定纵横比的响应容器*/.纵横比{位置：相对；}.方面-1-1{填充底部：100%；}.方面-4-3{填料底部：75%；}方面-16-9{垫底：56.25%；}/*这是关键部分-定位并将图像适配到容器*/.fit img{位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；最大宽度：80%；最大高度：90%}.fit img底部{顶部：自动；}.紧密贴合{最大宽度：100%；最大高度：100%}<div class=“container”><div class=“纵横比aspect-ratio-1-1 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-4-3 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img fit img tight“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/400x400“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/300x400“class=”fit img fit img bottom“alt=”sample“></div></div>

您可以独立设置最大宽度和最大高度；图像将遵循最小的图像（取决于图像的值和纵横比）。您还可以将图像设置为按需对齐（例如，对于无限白色背景上的产品图片，您可以轻松地将其定位到中心底部）。

事实证明，还有另一种方法可以做到这一点：对象拟合。

<img style='height: 100%; width: 100%; object-fit: contain'/>

将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。

小提琴：http://jsfiddle.net/mbHB4/7364/

我刚刚发布了一个jQuery插件，它可以满足您的需要，提供了很多选项：

https://github.com/GestiXi/image-scale

用法：

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

我使用以下代码修复了此问题：

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}