以固定的高度和宽度包装图像答案

【问题标题】：Wrap image in fixed height and width以固定的高度和宽度包装图像
【发布时间】：2017-11-21 17:03:41
【问题描述】：

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

问题

图像大小不同。有些徽标的宽度更高，高度更小。所以我不能将徽标包装到我的固定高度、宽度框中。看起来很乱。

我的解决方案

我已为徽标图像指定了最大宽度和最大高度。然后它会自动调整和显示而不会损坏纵横比。但大多数情况下，左右显示空白。我觉得很正常。

或者我是否需要使用 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>

【问题讨论】：

只设置静态高度或静态宽度，其他部分会自动计算。
你的意思是最大宽度和最大高度？

标签： html css

【解决方案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>

【讨论】：

那么带背景图片的logo呢？

【解决方案2】：

你试过object-fit: cover吗？将该属性应用到您的img，这样您就可以设置容器的height 和width，而img 将保持其纵横比。

.img-wrap-quotes img {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
 object-fit: cover;
}

【讨论】：

【解决方案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>

【讨论】：

这与标志透明/不透明无关。事实上，您无法更改图像/徽标颜色。
图片在盒子外面。