如何通过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>