javascript - 如何通过 CSS 将 Logo 的大小设置为相同？

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>