下面是一个简单的解决方案（4步修复！！），似乎对我有用。该示例使用宽度来确定整体大小，但也可以翻转宽度以使用高度。

将CSS样式应用于图像容器（例如，<img>）将宽度属性设置为所需的尺寸对于尺寸，使用%表示相对大小或自动缩放（基于图像容器或显示）对静态维度或集合维度使用px（或其他）将高度属性设置为根据宽度自动调整享受！

例如

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

解决方法很简单，只需要一点数学。。。

只需将图像放在div中，然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值，以计算宽度与高度的精确比率。

例如，假设您的图像宽度为200像素，高度为160像素。您可以放心地说，宽度值将为100%，因为它是较大的值。要计算高度值，只需将高度除以宽度即可得到80%的百分比值。在代码中，它看起来像这样。。。

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

我以这种方式在超链接内水平和垂直居中并按比例缩放图像：

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

它在Internet Explorer、Firefox和Safari中进行了测试。

有关居中的更多信息，请参阅此处。

这是我的解决方案。您需要将图片插入两次。但它不使用js，img将调整为宽度和高度。您可以单击“运行代码片段-完整页面”，打开开发控制台并调整窗口宽度以查看响应效果。/*响应宽度*/.响应宽度{背景：lightsalmon；高度：100px；宽度：50%；}/*Widthlimit公司*/.最大宽度{背景：海军；高度：200px；宽度：100px；}.div1{最大高度：100%；位置：相对；框大小：内容框；/*中心：*/顶部：50%；变换：translateY（-50%）；}.边缘{高度：自动；最大宽度：100%；不透明度：0；}.div2{高度：100%；宽度：配合内容；位置：绝对；顶部：0；/*中心：*/左：50%；变换：translateX（-50%）；}.mainimg{最大高度：100%；最大宽度：100%；}<div class=“responsivewidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div><div class=“maxedbywidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div>

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

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

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

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

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

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

height
width
viewbox

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

我有更好的解决方案，不需要任何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>

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