以固定的高度和宽度换行图像 [英] Wrap image in fixed height and width

问题描述

我有几个带有文本块的框，包括徽标图像.标志图片来自后端.我的客户需要以固定的宽度和高度包装这些图像.所以盒子看起来统一并且有利于一致性.

问题

图像大小不同.一些标志的宽度更大，高度更小.所以我无法将徽标包装到我的固定高度和宽度框中.看起来很乱.

我的解决方案

我为徽标图像提供了最大宽度和最大高度.然后它会自动调整并显示而不会破坏纵横比.但大多数情况下，在左侧和右侧显示空格.我觉得很正常.

或者我是否需要使用photoshop，将徽标制作为我固定的高度、宽度并上传?或者任何其他可用于实现这种情况的解决方案?

我的代码

.img-wrap-quotes{文字对齐:居中；}.img-wrap-quotes img {边距:0 自动；最大高度:70px；最大宽度:226px；}

<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">

解决方案

固定 logo 容器的大小，将透明 logo 保持在容器中间，固定 max-height.

.img-wrap-quotes{最大高度:70px；最大宽度:226px；宽度:226px；高度:70px；背景:#0000ff;文字对齐:居中；}.img-wrap-quotes img {边距:0 自动；最大高度:70px；最大宽度:226px；}

<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">

I have few boxes with texts blocks including logo images. Logo images come from back end. My client needs to wrap those images in fixed width and height. So the boxes look uniform and good for consistency.

Problem

Images sizes are diffrent. Some logos have higher width, less height like that. So I can't wrap logos into my fixed height, width box. It looks very messy.

My solution

I have given max width and max height to logo image. Then it automatically adjust and show without damaging aspect ratio. But most cases, show white spaces in left and right. I think it's normal.

Or do I need to use photoshop, make logo to my fixed height, width and upload? Or any other solution available for achieving this kind of situation?

My code

.img-wrap-quotes{
 text-align:center;
}
        
.img-wrap-quotes img {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
}

<div class="img-wrap-quotes">
 <img class="img-responsive " src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">
</div>
    

解决方案

Fix the size of logo container and keep the transparent logo just in middle of container with fixed max-height.

.img-wrap-quotes{
 max-height: 70px;
 max-width: 226px;
 width:226px;
 height:70px;
 background:#0000ff;
 text-align:center;
}
        
.img-wrap-quotes img {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
}

<div class="img-wrap-quotes">
 <img class="img-responsive " src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">
</div>
    

这篇关于以固定的高度和宽度换行图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！