使用CSS縮放圖像中的縮放圖像和/或縮小圖像以適合圖像的最大面

我已經查看了很多Q &這裏是關於主題的，但如果存在的話找不到確切答案。使用CSS縮放圖像中的縮放圖像和/或縮小圖像以適合圖像的最大面

我有一個動態寬度和高度的div，並且想要適合它內部的任何大小的圖像並保持寬高比。這可以縮放圖像向上或向下：

我試過寬度，高度，最大寬度，最大高度的每一個組合，對象配合等我能想到的，沒有運氣，總會有至少一個失敗的案例。我見過的大多數解決方案都涉及一些硬編碼的最大寬度或高度值。是否有可能獲得以上所有案件只能使用CSS和動態大小的div容器？

PS我的目標瀏覽器是邊緣，如果這有所作爲。

謝謝！

2016-09-01 Geordie

我在這裏添加了所有案例的示例：https：//jsfiddle.net/rambutan2000/8rmvp8a7/ – Geordie

所以我問這是因爲我正在做一個簡單的幻燈片放映，這裏是一切工作的示例（在Edge中進行測試並鉻）https://jsfiddle.net/rambutan2000/vvsnus6o/ – Geordie

這裏是沒有背景「黑客」的例子，在邊緣部分的工作，但：https://jsfiddle.net/rambutan2000/tu2ps0go/ – Geordie

下面介紹一種方法。

使用background: url(path/to/image)，然後使用background-size屬性來設置縮放到含有background-size: contain（參見小提琴，https://jsfiddle.net/mghgsk5e/）應用圖像作爲CSS背景。

2016-09-01 19:44:14

選項1不符合縮放UP的要求，只有DOWN。 –

你是對的@樂羅伊，我的壞 - 編輯答案。 –

感謝Mathias！我已經擴展了您的示例並在Edge上進行了測試：https://jsfiddle.net/rambutan2000/q4kr4z1r/所有案例都在運行。 – Geordie

對於所有現代瀏覽器除了邊緣和所有版本的Internet Explorer，您可以使用CSS屬性object-fit。

例子： https://jsfiddle.net/09cpe9e0/1/

我會傾向於實施，可以在日後被刪除，只留下CSS版本時是安全的這樣做的Internet Explorer和邊緣一個JavaScript的解決方案。

2016-09-01 19:58:26

感謝樂羅伊，只是要100％清楚，有沒有獲得在CSS工作沒有對象適合所有情況的方式？ – Geordie

我無法想出任何東西，也沒有任何其他人在網上找到。有可能找到一個非標準的黑客，但如果可能的話，我會避免採取這種路線。 –

回答