如何：滾動的大圖片，居中的小圖像，

Question

無論我怎麼努力，我不能設法找到以下行爲的合理CSS：

答：幅度超出窗口圖像顯示左上角圖像並允許滾動查看其餘部分。 （重要提示：父母的DIV背景被覆蓋，但應該是透明的圖像可見 - 即使你的滾動）

B：比窗口較小的圖像水平，垂直居中，父DIV覆蓋整個窗口。

感謝您的幫助！

Answer 1

line-height屬性原來是解決問題的基礎。不知道這是不是一個黑客，但它的工作原理。

.mainContainer { 
    text-align: center; 
} 
#mydiv { 
    line-height: 100vH; 
    margin: 0; 
} 
img { 
    vertical-align: middle; 
} 

Answer 2

爲中心父div內較小的圖像，你可以使用display:flex父div。然後將justify-content和align-items設置爲中心。這裏是一個解決辦法，

#mydiv { 
     overflow: auto; 
     max-width: 500px; 
     max-height:500px;  
    } 
    .mainContainer{ 
     width:500px; 
     height:500px;  
     background-color:#000;  
     display: flex; 
     justify-content: center; 
     align-items: center; 
     background-size:cover; 
    } 

與this替換小圖像，以檢查它如何與一個大形象工程。

<div class="mainContainer"> 
     <div id='mydiv'> 
     <img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' /> 
     </div> 
    </div> 

PS：將父div的寬度和高度更改爲所需的屏幕尺寸。希望這會有所幫助！