css - 如何在固定高度的 div 中保持漂亮的 Logo ？

Question

我想要一个漂亮的盒子并且那个盒子里有一个漂亮的 Logo ( Logo 仅供示例)。

但我不知道该怎么做。

我的图片标签是这样的

<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />

如果我包含 width="200" height="200"在<img>标记，我的 View 将如下所示。

我有一个漂亮的盒子，但丑陋的标志(拉伸(stretch))。

否则，如果我包含 width="200"仅在 <img>标记，我的 View 将如下所示。

我有一个漂亮的标志，但丑陋的盒子(没有排成一行)。

无论哪种方式，我的选择都会搞砸我的观点。 :(

Answer 1

您可以将图像放在 200x200 的 div 中，并将图像居中(但不要拉伸(stretch))，如下所示:

.imgbox{
    border:solid 4px grey;
    border-radius:5px;
    width:200px;
    height:200px;
    display: table-cell; vertical-align: middle 
}

<div class="imgbox">
    <img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>