將圖像縮放到帶有繼承高度的Div

我想將png圖像放入從另一個div繼承其高度的div的高度。我已經看到了如何通過將圖像的最大高度設置爲100％來完成這個問題（例如：How do I auto-resize an image to fit a div container），但這隻適用於當圖像直接位於div中時，高度以像素爲單位指定的情況。將圖像縮放到帶有繼承高度的Div

我有一個topbar，它的高度是我明確設置的，還有一個logodiv，它繼承了topbar的高度。但是，除非我明確設置高度（註釋代碼），否則徽標不會調整爲適合logodiv的高度。

這似乎是不好的代碼，必須設置高度兩次，當它應該被繼承。有沒有辦法讓圖像適合正確的高度而不需要這樣做？

CSS：

#topbar{ 
    width:100%; 
    height:45px; 
} 
#logodiv{ 
    float:left; 
    /* height:45px; */ 
} 
#logodiv img{ 
    max-height:100%; 
}

HTML：

<div id="topbar"> 
    <div id="logodiv"> 
    <img src="images/project/logo.png" /> 
    </div>  
</div>

來源

2015-02-05 Matt Cooper

我想要適合一個PNG的高度的圖像繼承其高度從另一個div。

技術上，logodiv是不從topbar繼承它的高度。它根據其內容（本例中的圖像）簡單地擴展自己。

嘗試添加屬性height:inherit;第二個div，你很好去。

HTML

<div id="topbar"> 
    <div id="logodiv"> 
    <img src="images/project/logo.png" /> 
    </div>  
</div>

CSS

#topbar{ 
    width:100%; 
    height:45px; 
} 

#logodiv{ 
    float:left; 
    height:inherit; 
    /* height:45px; */ 
} 

#logodiv img{ 
    max-height:100%; 
}

Fiddle

來源

2015-02-05 05:48:25 nalinc

有沒有辦法做到這一點，而不'高度：繼承？有些時候，元素與高度之間存在多於1個元素，並且內部元素期望是該高度。把'height：inherit'放在層次結構中的每個元素上似乎並不好。 – tscizzle

試試這個CSS：

#topbar { 
    width:100%; 
    height:45px; 
    border:1px solid red;/* for highlighting*/ 
} 
#logodiv { 
    float:left; 
    height:inherit; 
} 
/*To clear float */ 
#topbar:after { 
    clear:both; 
    display:block; 
    content:"" 
} 
#logodiv img { 
    max-height:100%; 
}

演示：http://jsfiddle.net/lotusgodkk/4d4L1g0a/

來源

2015-02-05 05:36:14

@Kķ感謝您對本解決方案！ –

將圖像縮放到帶有繼承高度的Div

回答

相關問題