html - 将图像制作成盒子

Question

我有一个 100px/100px 的边框，旁边是公司名称。必须在这个盒子里贴上公司标志。 Logo 有不同的尺寸。

我有以下代码。

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

HTML代码

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

这使得图像出现在框的顶部。

如果我在 company-logo 类中添加 object-fit: contain; 它工作正常。但是“object-fit”在 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 用于水平对齐