將圖像製成一個盒子

我有一個邊框爲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 –

將圖像製成一個盒子

回答

相關問題