将图像制成一个盒子

我有一个边框为100px/100px，旁边有公司名称。必须在此框中填入公司徽标。徽标可用不同的尺寸。将图像制成一个盒子

我有以下代码。

.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>

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

如果我在公司徽标类中添加object-fit: contain;，它工作正常。但是“对象适合”在Internet Explorer中不起作用。

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

预先感谢您。

来源

2016-03-28 Deeksha Bajaj

使用这个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是水平对齐

来源

2016-03-28 10:21:38

看到这个代码

我添加了display：table-cell; vertical-align：middle; text-align：center

现在工作的很好。

.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>

来源

2016-03-28 10:29:18

你能告诉我为什么你下来我的票的原因。我的代码非常好。给我理由我会感激。 –

这是因为[本问题]的元效应（http://meta.stackoverflow.com/questions/319870/what-to-do-when-particular-user-is-sharing-his-own-sites-link在每个答案）询问META STACKOVERFLOW。 – Sandeep

非常感谢@Sandeep –

将图像制成一个盒子

回答

相关问题