如何通过CSS设置相同的徽标大小？
如何通过CSS设置相同的徽标大小？
提问于 2017-11-15 21:59:44
这些图像都是相同大小的。我使用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的解决方案，或者我必须使用图像处理软件？
请求的相同大小和清晰的结果图像：
更新：
1-我试图更改宽度并将高度设置为自动，但我没有得到我想要的。
2-我尝试了这条线路，但不起作用。
<%
logo = "<div class='img' style='background-image:url(\""+logoUrl+"\");' style='max-width:220px;'> </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;
}详细图片：
从外部看，图像的大小相同，但从内部看，它们的大小并不相同。我希望图像具有相同的高度和宽度，而不修改图像的纵横比。我该怎么做呢？
回答 1
Stack Overflow用户
发布于 2017-11-15 23:59:19
Css：
.image-container {
width:300px;
height:150px;
text-align:center;
}
.image-container img {
height:100%;
}Html：
<div class="image-container">
<img src="path"/>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47309361
复制相关文章
相似问题
腾讯云开发者
