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

Question

图像都是相同的大小。 我使用Image GIF，硬盘上的图像大小为415x72。

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

硬盘上的图像详细信息：

视图.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%>" />

图片详情：

我已经查看了此链接，但对我不起作用。 我找不到任何解决方案来满足我的要求。

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

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

视图.jsp：

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

添加代码后的图片详情：

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

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

要求的结果

更新：

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;
}

详细图片：

128x128 大小的图像

从外面看，图像大小相同，但从内部看，它们的大小不同。 我想要具有相同高度和宽度的图像而不修改图像的纵横比。 我怎样才能做到这一点？

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>