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

#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中进行了测试。

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

此解决方案不会拉伸图像并填充整个容器，但会剪切部分图像。

HTML格式：

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

这是我的解决方案。您需要将图片插入两次。但它不使用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>

正如我在2014年Codepen示例中所看到的，我已经制定了一个解决方案，可以在尽可能少的javascript的帮助下处理任何未知的宽度/高度（纵横比）组合，以在容器的纵横比高于/低于图像的纵横比时更改图像居中的CSS：

尝试通过拖动右下角来调整容器大小：

//检测当前图像的窗口宽度是否过窄//并且适合于100%的高度而不是100%的宽度。const photo=文档.images[0]const onPhotoResize=新建ResizeObserver（条目=>window.requestAnimationFrame（checkRatio）)onPhotoResize观察（photo.parentNode）函数checkRatio（）{const photoParent=photo.parentNode，imageAspectRatio=照片客户端宽度/照片客户端高度，parentAspectRatio=photoParent.clientWidth/photoPrent.clientHeightphoto.classList[imageAspectRatio>parentAspectRatio？'add'：'remove']（'max'）}.box格式{宽度：20%；高度：60%；边距：自动；位置：绝对；顶部：0；左：0；右：0；底部：0；调整大小：两者；溢出：隐藏；边框：5px纯红色；} .box>img{位置：绝对；顶部：50%；左：50%；宽度：100%；转换：转换（-50%，-50%）；}.box>img.max｛width:auto；height:100%；｝<div class='box'><img src=“https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg"></div>

您可以将图像设置为div的背景，然后使用CSS background size属性：

background-size: cover;

它将“将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools

有几种方法可以使图像适合＜div＞。

img {
    object-fit: cover;
}

CSS对象适合属性用于指定如何调整＜img＞或＜video＞的大小以适合其容器。

此属性告诉内容以多种方式填充容器；例如“保持该纵横比”或“拉伸并尽可能多地占用空间”。

fill-这是默认值。调整图像大小以填充给定尺寸。如有必要，图像将被拉伸或压扁以适合contain-图像保持其纵横比，但调整大小以适应给定的尺寸封面-图像保持其纵横比并填充给定的尺寸。将剪裁图像以适合none-图像未调整大小缩小-图像缩小到无或包含的最小版本

你可以在这里找到更多的工作样本。