想到了一个问题

今天在浏览网页的时候看到一种布局突然就想它是怎么实现的呢，看来下发现不是css实现的，是用js实现的觉得如果没有js帮忙呢，就尝试用css看看能不能实现，发现自己基础真的要好好补下了。。哈哈，anyway，需求如下：

• 图片在屏幕上方块中水平垂直居中

• 图片宽度和高度都是不确定的
• 图片宽度和高度自适应其容器，宽度和高度随着容器变化而变化，这时需保证宽高比不变即图片不被拉长或压缩；还需保证宽度和高度都不能超过原始值的大小，这样图片不会失真

尝试实现一下

常见的未知高度的垂直居中的方法选一种就好了。而不失真自适应的原理就是利用我不太常用的max-width: 100%; max-height=100%; 来保证第三条的实现。如果图片的实际宽或高超过了其容器，因为有上面max的限制，浏览器就会按照其容器的宽或高来限制其超出容器。因为图片高度和宽度都没有设为固定值，则他们的比例一直保持着。如果图片的实际宽或高没有超过其容器，则按原始大小呈现，即便容器再变大图片也不会受影响，自然不会变大失真了。有点儿绕。。。表达能力真作急。。。

代码如下：

<div class="block">
    <div class="pic-wrapper">
        <div class="pic">
        <!--  <span class="helper"></span> -->
        <img src="http://placehold.it/700x500/e8117f/ffffff" alt="" />
   </div>
   </div>
       <div class="bottom">
   </div>
</div>

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.block {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-bottom: 50px;
}

.pic-wrapper {
  background-color: #fff;
  height: 100%;
  padding: 100px;
  overflow: hidden;
}
.pic {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #ccc;
}
.pic img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*   vertical-align: middle; */
}

.helper {
  display: inline-block;
  height: 100%;
/*   vertical-align: middle; */
}

.bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #4488ff;
}

CodePen

See the Pen 图片不失真并且自适应水平垂直居中 by Zhang Xiao (@zhang-xiao) on CodePen.