+ + Largura de imagem desconhecido e a altura do centro vertical

+ + Largura de imagem desconhecido e a altura do centro vertical

O primeiro:-célula mesa / inline-block
+ vertical-align condições: receber largura e altura da imagem da largura padrão recipiente e altura afectar
estrutura html:

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

css código:

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

Pontos principais:

1. display:inline-block: De tal modo que o recipiente (i.e. <div>) com largura e altura da imagem mudança tamanho

2. vertical-align: middle : O modo vertical que a imagem está centrado no interior do recipiente

3. inline-blockE table-cellimplementar são diferentes, a primeira no tamanho do recipiente e o tamanho da imagem no recipiente em causa, que o comprimento do contentor e o comprimento da imagem recipiente interno relacionada com a altura do recipiente máximo e que todos os recipientes na linha da altura da imagem relacionado

A segunda: "objectos escondidos" + vertical-align
condições: o recipiente é maior do que a largura e altura da imagem são conhecidos e padrão largura e altura
estrutura html:

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

css código:

        .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;
        }

Pontos principais:

1. elementos .hidden são height:100%esticadas a partir do recipiente (isto é .container) na parte superior para a parte inferior do recipiente para width:0ser escondida

2. <Img> um vertical-align:middlee .hidden um vertical-align:middlepredeterminado <img> elemento e elementos .hidden devem estar alinhados de acordo com tanto o centro

Terceiro: .gif transparente + background-image: url ( './ imagem .jpg')
Condições: a largura do recipiente e altura de largura e altura da imagem são conhecidos e determinado

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

html estrutura:

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

css código:

          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;
             }

Pontos principais:

1. transparent.gif: transparente, de modo que a imagem de fundo uma exposição de fotos

2. background-position: center: Imagem de fundo de tal modo que o recipiente (isto é, <img>) é centrada verticalmente