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

Posted 2020-11-26 jlfw

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

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

        <div>
                <img src="./image.jpg" >
        </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-block和table-cell实现起来有区别，前者中容器的大小与这个容器内的图片大小有关，后者中容器的长度与这个容器内图片的长度有关，容器的高度与那一行中所有容器内图片高度的最大值有关

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

    <div class="container">        
        <img src="./image.jpg" >
        <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" >
        </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>)中垂直居中