如何使圖像自動調整大小以適應與高度相關的瀏覽器窗口

我正在嘗試使圖像適合瀏覽器窗口與其高度相關並動態響應窗口大小。如何使圖像自動調整大小以適應與高度相關的瀏覽器窗口

我需要圖像寬高比保持不變，但如果在大屏幕上查看圖像，圖像可能大於原始分辨率。

我不希望圖像溢出屏幕外，並創建一個scolling效果。

圖像必須保持居中放置，既是垂直也是水平的容器。

Here is an example of what I am trying to achieve.

來源

2016-08-09 Breageside

'我想...'。分享你的嘗試。這很容易用「高度：100％;寬度：自動;'或與'background-size：cover' –

試試這個js插件http://johnpolacek.github.io/imagefill.js/ – Jason

@Jason這是一個'background-size：cover' with'background-位置：中心中心。使這兩行比包含一個依賴jQuery的插件寫這兩行更好。 –

目前尚不清楚你嘗試過什麼到目前爲止，我們不要」沒有看到任何代碼。我會盡力回答，也許它會幫助你。

首先，當您使用響應式佈局時，請始終嘗試使用viewport height and width來設置您的元素的大小。這有助於保持內容相對於瀏覽器的大小 - 無論是調整大小還是屏幕有多大。

此代碼可以幫助你插入一個負責任的形象到您的網站：

div { 
    width:80vw; 
    height:80vh; 
} 
img { 
    max-width:100%; 
    height:auto; 
    max-height:100%; 
}

工作實例here

在這個例子中div大小兩個窗口的高度和寬度的80％，所以它永遠不會超過視口。最大。 img的措施是div和height:auto;的100％確保其保持其縱橫比。然後圖像適合一個div允許的最大值。通過將display:table-cell; vertical-align:middle; text-align:center;設置爲DIV，您可以舒適地將圖像居中。

另一個解決方案是：

background-image:url(' '); 
background-size:contain; 
background-repeat:no-repeat; 
background-position:center;

檢查出來here

來源

2016-08-09 08:46:17 freewheeler

感謝您的深入解答。這正是我正在尋找的。如何在沒有窗口開始滾動的情況下在此div上放置白色邊距？ – Breageside

我只是使用黃色背景來演示DIV與圖像的相對大小。檢查https://jsfiddle.net/ecj81dex/5/ – freewheeler

@Breageside，你可以使用輪廓：{any-width} solid #fff; – Eggineer

做這樣的事情你爲例，你可以使用background-size:cover。

cover 
縮放圖像，同時保持其固有的縱橫尺寸比（如果有的話），以最小的尺寸，使得它的寬度和高度都可以完全覆蓋背景定位區域。

這確保背景圖像覆蓋了一切。將不會有明顯的background-color，但是根據屏幕比你的形象的很大一部分可能會被切斷

另請參閱該plunker：https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

來源

2016-08-09 08:14:36 Maxouhell

如何使圖像自動調整大小以適應與高度相關的瀏覽器窗口

回答

相關問題