如何：可滚动的大图像，居中的小图像，

Question

无论我尝试什么，我都无法找到适合下面行为的CSS：

A：大于窗口的图像显示图像的左上角，并允许滚动以查看其余部分。 （重要：父级的DIV背景已被覆盖，但应该在具有透明度的图像上可见 - 即使您滚动也是如此。）

B：小于窗口的图像水平和垂直居中，父DIV覆盖整个窗口。

感谢您的帮助！

Answer 1

为了将较小的图像置于父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的宽度和高度更改为您所需的屏幕尺寸。希望这会有所帮助！

Answer 2

line-height 属性被证明是解决问题的基础。不确定这是否是黑客，但它确实有效。

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