以固定的高度和宽度包裹图像

Question

我的文件块很少，包括徽标图像。徽标图像来自后端。我的客户需要以固定的宽度和高度包装这些图像。因此盒子看起来均匀，一致性好。

问题

图像尺寸不同。有些徽标宽度较高，高度较低。所以我无法将徽标包装到我的固定高度，宽度框中。它看起来很乱。

我的解决方案

我已经为徽标图片指定了最大宽度和最大高度。然后它会自动调整和显示而不会损害纵横比。但大多数情况下，左右显示空白区域。我认为这是正常的。

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

我的代码

.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>
    

Answer 1

修复徽标容器的大小，并将透明徽标放在容器中间，并保持最大高度。

.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>
    

Answer 2

你试过var yourArray = [ {"id":"3","package_name":"Standard","invoice_amount":"30000"}, {"id":"4","package_name":"Premium","invoice_amount":"50000"}, {"id":"5","package_name":"Luxury","invoice_amount":"120000"} ]; function getAmountByPackage(package_name){ for(var i=0,o,l=yourArray.length; i<l; i++){ o = yourArray[i]; if(o.package_name === package_name){ return o.invoice_amount; } } return false; } console.log(getAmountByPackage('Standard')); console.log(getAmountByPackage('Premium')); console.log(getAmountByPackage('Luxury')); console.log(getAmountByPackage('Should return false'));吗？将该属性应用于object-fit: cover，这样您就可以设置容器的img和height，width将保留其宽高比。

img

了解详情：https://www.w3schools.com/css/css3_object-fit.asp

Answer 3

.center {
    margin: auto;
    width: 40%; /*set width as you need it*/
    border: 3px solid #73AD21; /* just added border to check the alignment you can adjust*/
    padding: 10px;
    background:#ccc;  /* just added bg to check the alignment*/
}

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