如何通过 CSS 将徽标的大小设置为相同？

Question

图片大小相同。 我用的是Image GIF，硬盘上的图片大小是415x72。

图像被放置在一个表格中我想通过 css 使所有图像都相同。

硬盘上的图像详细信息：

view.jsp：

<%
logo ="<img src='/path/images/vendor/"+vendor.toLowerCase()+".gif' style='max-width:120px'/>";
%>

<liferay-ui:search-container-column-text name='vendor'
         cssClass="width-10" value="<%=logo%>" />

图片详情：

我已经研究了这个link，但对我不起作用。我找不到任何解决方案来满足我的要求。

我在下面尝试了这段代码，但图片变得模糊。

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

view.jsp：

<%
logo ="<img class='img' src='/path/images/vendor/"+vendor.toLowerCase()+".gif' style='max-width:120px'/>";
%>

添加代码后的图片详情：

有没有css的解决方案或者我必须使用图像软件？

请求的相同大小且清晰的结果图像：

requested result

更新：

1- 我尝试更改宽度并将高度设置为自动，但没有得到我想要的。

2- 我试过这条线但没有用。

<%
logo = "<div class='img' style='background-image:url(\""+logoUrl+"\");' style='max-width:220px;'>&nbsp;</div>";
%>

3- 我尝试使用 html 标签<img> 调整大小并使用background-image 进行剪切。 我点击了这个链接：CSS Display an Image Resized and Cropped我没有得到好的结果。

<%    
logo = "<div class='crop'><img class='img' src='"+logoUrl+"' style='max-width:120px;' alt='"+vendor.toLowerCase()+"'/></div>";
%>

css:

.crop {
    width: 160px;
    height: 120px;
    overflow: hidden;
}

.crop img {
    width: 565px;
    height: auto;
    margin: -75px 0 0 -100px;
}

详细图片：

Images with 128x128 size

从外部看，图像大小相同，但从内部看，它们的大小不同。我想要具有相同高度和宽度的图像而不修改图像的纵横比。我该怎么做？

Answer 1

CSS：

.image-container { 
    width:300px;
    height:150px;
    text-align:center;
}

.image-container img {
    height:100%;
}

HTML：

<div class="image-container">
    <img src="path"/>
</div>