图片不失真自适应水平垂直居中

想到了一个问题
今天在浏览网页的时候看到一种布局突然就想它是怎么实现的呢,看来下发现不是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.

如果我的文章对您有帮助
欢迎打赏(。・ω・)

Zhang Xiao

Read more posts by this author.

beijing