图片 + 未知宽高 + 垂直居中

图片 + 未知宽高 + 垂直居中

第一种: table-cell / inline-block + vertical-align
条件: 容器宽高受图片默认宽高影响
html结构:

        <div>
                <img src="./image.jpg" alt="">
        </div>

css代码:

      div {
              display: inline-block;
              /*display: table-cell;*/
              padding: 10px;
              border: 2px solid #aaa;
          }
      img {
              vertical-align: middle;
          }

关键点:

  1. display:inline-block :使得容器(即<div>)的宽度和高度随图片大小改变

  2. vertical-align: middle :使得图片在容器内部垂直居中

  3. inline-blocktable-cell实现起来有区别,前者中容器的大小与这个容器内的图片大小有关,后者容器的长度与这个容器内图片的长度有关,容器的高度与那一行中所有容器内图片高度的最大值有关

第二种:“隐藏物体” + vertical-align
条件: 容器宽高已知且大于图片默认宽高
html结构:

    <div class="container">        
        <img src="./image.jpg" alt="">
        <span class="hidden"></span>
    </div>

css代码:

        .container {
            width: 800px;
            height: 600px;
            border: 2px solid #ddd;
            text-align: center;
        }

        img {
            vertical-align: middle;
        }

        .hidden {
            height: 100%;
            width: 0;
            vertical-align: middle;
            display: inline-block;
        }

关键点:

  1. .hidden元素以height:100%伸张自容器(即.container)顶部到容器底部,以width:0加以隐藏

  2. <img>的vertical-align:middle和.hidden的vertical-align:middle规定<img>元素和.hidden元素必须根据双方的中部对齐排列

第三种:透明.gif + background-image:url(‘./图片.jpg’)
条件: 容器宽高已知且决定图片宽高

    'transparent.gif':    透明的gif格式图片;
    'background-image':   需要展示的图片;

html结构:

        <li>
               <img src="./transparent.gif" alt="">
        </li>

css代码:

          li {
                  list-style: none;
                  width: 256px;
                  height: 256px;
                  padding: 20px;
                  border: 2px solid #ddd;
             }
          img{
                  width: 100%;
                  height: 100%;
                  display: block;

                  background-position: center;
                  background-image: url('./image.jpg');
                  background-size: 100%;
                  background-repeat: no-repeat;
             }

关键点:

  1. transparent.gif :透明,使得背景图片成为展示图片

  2. background-position: center :使得背景图片在容器(即<img>)中垂直居中

    原文作者:fieryheart
    原文地址: https://segmentfault.com/a/1190000008447970
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞