怎么使图片等比缩放并居中？

Question

如上图所示，这个页面有头部和底部悬浮（无滚动条），而图片不论宽高大小（图片和页面尺寸不固定）只显示在蓝色区域内（区域不固定），上下左右空出一定的距离（上下和左右空出的距离不需要对称，上下左右只要居中就行，但不要被头部和底部的悬浮盖住），请问用JS该怎么做呢？

Answer 1

我以前的做过的项目基本都是用css3提供的calc方法实现的，使用特别简单。

height: calc(100vh - 260px);

如果你非要用js去实现的话也不是很难，比如这样的写法。

            var left = $td.outerWidth() / 2 + 12;
            if ($parent.innerHeight() - $row.position().top > 750) {
                pos = $row.position().top + $row.height() / 2 + 200;
            } else {
                pos = $row.position().top - $('#popover-infomation').outerHeight(true) + 156;
            }

当窗口的大小变化时候，再次计算大小。

window.onresize = _funcRef_

还见到有人用canvas加载图片的，你的这个简单不需要。

Answer 2

用JS我就不知道了．．．只会用CSS
fixed或者absolute什么的都是可以的

Answer 3

只能用css

.blue img{
    max-width:calc(100vw - 左侧宽度 - 右侧宽度);
    max-height:calc(100vh - 顶部悬浮高度 - 底部悬浮高度 - 上面灰色高度 - 下面灰色高度)
}

Answer 4

.img-container
  height 100%
  padding $vertical-padding $horizontal-padding
  
img
  width 100%
  height 100%
  object-fit cover