我的文件块很少,包括徽标图像。徽标图像来自后端。我的客户需要以固定的宽度和高度包装这些图像。因此盒子看起来均匀,一致性好。
问题
图像尺寸不同。有些徽标宽度较高,高度较低。所以我无法将徽标包装到我的固定高度,宽度框中。它看起来很乱。
我的解决方案
我已经为徽标图片指定了最大宽度和最大高度。然后它会自动调整和显示而不会损害纵横比。但大多数情况下,左右显示空白区域。我认为这是正常的。
或者我是否需要使用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>
答案 0 :(得分: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>
答案 1 :(得分:0)
你试过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
答案 2 :(得分:-1)
.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>