如何使容器內的div具有與其他div兄弟同尺寸的圖像？

Question

我有一個名為“ nav”的父div容器，它充當導航欄，而子div則充當選擇項。

問題：我想在此導航欄內向左一直放一個圖像。 但是，除非我使div“徽標”具有固定的寬度和高度，否則它根本不會顯示（沒有寬度）。 當我這樣做時，圖像將無法適當地調整大小以適合div內部。 我只看到圖像的一部分。 我也希望div /圖像相對於div“名稱”的大小進行縮放，而不是相反。 例如，給div“徽標”設置100px的寬度/高度，並看到它會更改div“ nav”的大小。 圖片的大小應調整為與div“名稱”相同的高度。 如果div“名稱”的高度為30像素，則div“徽標”的寬度和高度應為30像素（給出或獲取一個像素）。

我該怎么做呢？ divs有可能嗎？ 如果不是，我能做到的最接近的方法是什么（我更喜歡使用divs）？

代碼： 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> 

Answer 1

當使用background-image ，尤其是background-size: contain; 僅當具有這些屬性的元素（具有尺寸）存在時，才能顯示圖像。

話雖如此，您必須（如果元素為空）應用height或min-height ，其width與之對應，以使背景圖像可以顯示。

當我這樣做時，圖像將無法適當地調整大小以適合div內部。 我只看到圖像的一部分。

圖像顯示為find為我 ，但是我確實編輯了您的代碼：

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更改圖像尺寸， 請參見小提琴 ，就像#name不會在resize更改height 。