Question

我的边框为100px / 100px，旁边有公司名称。必须在此框中符合公司徽标。徽标有不同的尺寸。

我有以下代码。

.logo-border {
  width: 100px; 
  height: 100px;
  border: 1px solid #eee;
  background: #fff;
  padding: 5px;
}
.company-logo {
  height: auto;
  width: 100%;
}

HTML CoDe

<div class="logo-border">
   <img class="company-logo" src="/images/abc.png">
</div>

这使图像显示在框的顶部。

如果我在公司徽标类中添加object-fit: contain;，它可以正常工作。但是＆＃34;对象适应＆＃34;在Internet Explorer中不起作用。

尝试过使用位置。但那也没有用。请帮助我！

提前谢谢。

Answer 1

使用此css

.logo-border {
  width: 100px; 
  height: 100px;
  border: 1px solid #eee;
  background: #fff;
  padding: 5px;
  display:table;
  text-align:center;
}
.company-logo {
  height: auto;
  width: 100%;
  display:table-cell;
  vertical-align:middle;
}

这将使表格属性垂直和水平居中对齐，您可以使用vertical-align:middle垂直对齐它，text-align:center用于水平对齐

Answer 2

请参阅此代码

我添加了 display：table-cell; 垂直对齐：中部;文本对齐：中心

现在工作正常。

.logo-border {
  width: 100px; 
  height: 100px;
  border: 1px solid #eee;
  background: #fff;
  padding: 5px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.company-logo {
  height: auto;
  width: 100%;
}

<div class="logo-border">
   <img class="company-logo" src="http://2.bp.blogspot.com/-wECsXJqZ_I0/VDmPRlNa_MI/AAAAAAAAIfQ/UbS33drV1qo/s1600/car%2Blogo%2Bpicture%2B3.png">
</div>

将图片放入方框

2 个答案: