我如何使一個容器內的div有一個像其他div的兄弟姐妹一樣大小的圖像？

我有一個名爲「nav」的父級div容器，充當導航欄以及作爲選擇的子div。我如何使一個容器內的div有一個像其他div的兄弟姐妹一樣大小的圖像？

問題：我想有一個圖像一路左側，在這個導航欄內。然而，它只是不顯示（沒有寬度），除非我讓div「logo」具有固定的寬度和高度。當我這樣做時，圖像不會適當地重新調整大小以適應div內部。我只看到圖像的一部分。另外我想div /圖像相對於div「名稱」的大小進行縮放，而不是相反。作爲一個例子給div「標誌」一個100px的寬度/高度，並且看到它改變了div「nav」的大小。圖像應重新調整到與div「名稱」相同的高度。如果div「name」的高度爲30px，那麼div「logo」的寬度和高度應爲30px（給出或佔用像素）。

我該怎麼做？ div有可能嗎？如果不是最接近的方式，我可以做到這一點（我寧願使用div）？

代碼：http://jsfiddle.net/x3f63cye/3/

html, body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    font-family:'Myriad Pro Regular'; 
 
    color:#1E3264; 
 
} 
 
.flexer { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
div#nav { 
 
    position:relative; 
 
    width:100%; 
 
    background: white; 
 
    box-shadow: 0px 0px 3px 1px #888888; 
 
} 
 
div#logo { 
 
    background-size:contain; 
 
    background: url('https://lh5.googleusercontent.com/-SnVrCsddc7c/AAAAAAAAAAI/AAAAAAAAAEM/v3eM1AEdb70/photo.jpg') center center no-repeat; 
 
    border-right-style:solid; 
 
    border-width:1px; 
 
    border-color: rgba(0, 0, 0, 0.15); 
 
} 
 
div#name { 
 
    padding: 0% 5% 0% 5%; 
 
    border-right-style:solid; 
 
    border-width:1px; 
 
    border-color: rgba(0, 0, 0, 0.15); 
 
    font-size:2em; 
 
    align-items:center; 
 
    justify-content: center; 
 
}

<div id="nav" class="flexer"> 
 
    <div id="logo" class="flexer"></div> 
 
    <div id="name" class="flexer">Choice1</div> 
 
</div>

來源

2015-11-04 BubbleTree

當使用background-image，特別是與background-size: contain;如果與那些性質的元件存在，其尺寸只能所示的圖像。

話雖這麼說，你必須（如果該元素將是空的）申請height或min-height和它的width同行給的背景圖像的東西來顯示。這

當我這樣做時，圖像會沒有適當的重新調整大小以適應div內部。我只看到圖像的一部分。

The image shows up find for me，但我並編輯代碼：

div#logo { 
    background: transparent url('https://lh5.googleusercontent.com/-SnVrCsddc7c/AAAAAAAAAAI/AAAAAAAAAEM/v3eM1AEdb70/photo.jpg') no-repeat center/contain; 
    border-right-style:solid; 
    border-width:1px; 
    border-color: rgba(0, 0, 0, 0.15); 
    height: 20px; 
    width: 20px; 
}

此外，我想DIV /圖像相對擴展到div「名」，而不是周圍的其他方式的大小。

那麼你應該使用相對值的尺寸，如%或ems，但這不會改變resize，see fiddle圖像尺寸，就像#name不會對resize改變height。

來源

2015-11-04 01:44:54 justinw

我如何使一個容器內的div有一個像其他div的兄弟姐妹一樣大小的圖像？

回答

相關問題