需要圖像以匹配靈活的父包裝的大小

Question

我正在嘗試創建一個圖像庫，該圖像庫位於頁面的中心位置，最大高度/寬度爲瀏覽器窗口的85％。下面是目標：

• 絕對沒有使用Javascript（沒有我們不希望第三方解決方案）
• 圖像應始終完全一樣大小的包裝（除填充/邊境/保證金）
• 圖像不應該超越對包裝設定的85％的最大寬度/高度

的問題是，當我有一個非常高（或寬）圖像時，IMG將忽略父母的最大高度和在包裝外運行。

• 溢出似乎不工作（我們不想滾動條）。
• 將img高度/寬度設置爲100％似乎不起作用，我假設這是因爲它的父級是絕對定位的？
• 無法設置包裝div的高度/寬度（僅限於最大值），因爲如果圖像較小，會有一堆空白。再次，我們希望在沒有JavaScript的情況下做到這一點

對不起，內嵌樣式。

<div id='wrap' style='position: absolute; top: XXXpx; left: XXXpx; max-width: 85%; max-height: 85%'> 
    <img src='mypic.jpg'> 
    <div id='leftArrow' style='position: absolute...'></div> 
    <div id='rightArrow' style='position: absolute...'></div> 
    <div id='thumbnails' style='position: absolute...'></div> 
</div> 

Answer 1

做這樣的：

Fiddled up for ya

所以我們基本上前述需要設置一個高度上的包裝都沒有。如果在元素上沒有定義高度，則百分比基於DOM層次結構中具有定義寬度的最低元素，該元素是元素接收百分比的父元素。

所以在這種情況下，max-width: 85%和max-height: 85%將body元素稱爲具有定義大小的最近的父元素。

HTML

<div id='wrap'> 
    <img src='https://placehold.it/1200x1400' /> 
    <div id='leftArrow' style='position: absolute'></div> 
    <div id='rightArrow' style='position: absolute'></div> 
    <div id='thumbnails' style='position: absolute'></div> 
</div> 

CSS

html, body { 
    height: 100%; 
    margin: 0; 
} 

#wrap { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
#wrap img { 
    max-height: 85%; 
    max-width: 85%; 
} 

部分該解決方案的美的是，我們基本上告訴包裝元素本身推到頁面中心，然後使用CSS 3 transform屬性，通過相對於其自身的偏移將其自身滑動到頁面中心height/width（這就是translate(-50%, -50%)屬性所做的）。

這意味着無論圖像的大小如何，它都會一致地呈現在頁面的中心位置。如果填寫了leftArrow，rightArrow和thumbnails部分，則#wrap元素仍將呈現在頁面的中心位置。 transform是CSS 3規範中引入的最有用的功能之一，也是其他原因之一。

編輯：

Updated fiddle

所以這裏的區別是，因爲我們需要的.wrap元素這樣的緊密包裹，我們將使用一些措施鮮爲人知的單位設置圖片高度。

檢查這個改變CSS：

#wrap { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-color: #075883; 
    max-height: 85%; 
    max-width: 85%; 
} 
#wrap img { 
    max-height: 100%!important; 
    max-width: 100%; 
} 

重要的事情，這裏要注意

1. 我們移動max-width和max-height規則來包裝。這確保了它的適當縮放。
2. 對max-width和max-height規則的更改意味着我們需要以不同的方式約束圖片。你會認爲我們可以用max-width: 100%或max-height: 100%這樣做，但你不能。 max-height在這種情況下不起作用，並且圖片滔滔不絕。但不用擔心，因爲我們有相對於確定我們可以回退。我們將max-width設置爲85vw（85/100視圖寬度）和max-height至85vh（85/100視圖高度）。

應該這樣做。