如果你能够将图像设置为背景图像，那么你可以这样做，这将裁剪图像而不拉伸它:

<div style="background-image: url(...); background-size: cover; width: 100%; height: 100%;"></div>

如果你需要坚持使用<img>标签，那么从2019年开始，你现在可以使用对象适合css属性，它接受以下值: 填充|包含|覆盖|无|缩小

参见https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

举个例子，你可以有一个存放图像的容器:

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

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

有一个更简单的方法，只使用CSS和HTML:

HTML:

<div 
    class="fill" 
    style="background-image: url('path/to/image.jpg');">
</div>

CSS:

.fill {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

这将把你的图像作为背景，并拉伸它以适应div的大小而不失真。

设置外部容器div的宽度和高度。然后在img上使用下面的样式:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

这将帮助你保持你的img的纵横比

试试这个

HTML:

<div class="container"></div>

CSS:

.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}

这不是一个完美的解决方案，但这个CSS可能会有所帮助。缩放是这段代码的工作原理，理论上，对于小图像，因子应该是无限大的，但在大多数情况下，2、4或8就可以了。

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

如果你想设置一个最大宽度或高度(这样它就不会很大)，同时保持图像的纵横比，你可以这样做:

img{
   object-fit: contain;
   max-height: 70px;
}