CSS Image поз средней в динамике пропорционально высоте/ширине DIV

Question

нужно решить эту маленькую задачу:

1. центр по вертикали и по горизонтали изображение в DIV.
2. Высота DIV должна быть пропорциональна ширине.
3. Ширина DIV является растяжимой (например, 50% от родительского div).
4. IMAGE width и height = auto (он должен заполнять div, если его ширина или высота> чем ширина или высота div, и имеют основной размер, если его размер < и оставаться пропорциональным).

Я знаю, как сделать 2 и 3.

HTML:

<div class="container"> 
    <img src="img.png"/> 
</div> 

CSS:

.container { 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; 
} 

Но как к центру и среднего IMAGE в этом DIV? Существует много способов сделать одну задачу с не пропорциональным и не растягиваемым div. Но я не знаю, как сделать все это в полном объеме задач.

Вы можете помочь? HTML и CSS могут быть любыми.

Answer 1

решаемым это сам. Проверьте здесь: http://jsfiddle.net/42trk8ux/17/

HTML:

<div class="width-50"> 
    <div class="parent"> 
     <div class="aspect"></div> 
     <div class="block"> 
      <div class="tbl"> 
       <div class="tbl-cell"> 
        <img src="img.jpg"/> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.width-50{ 
    width:50% 
} 

.parent{ 
    position: relative; 
} 

.aspect 
{ 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; 
    box-sizing: border-box; 
} 

.block{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    display: block; 
} 

.tbl{ 
    display: table; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

.tbl-cell{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    background: #aaa; 
} 

.tbl-cell img{ 
    max-width:100%; 
    max-height:100%; 
} 

Answer 2

ли вы попробовать:

.container img { 
     vertical-align : middle 
    } 

? Он будет вертикально выравнивать изображение.

Answer 3

Попробуйте это:

<style> 
      .container 
      { 
        width :100%; 
        height :100%; 
        display :table; 
      } 
      .child 
      { 
        vertical-align :middle; 
        display  :table-cell; 
      } 
      .child img 
      { 
        display :block; 
        width :50%; 
        margin :0 auto; 
      } 
    </style> 

    <div class="container"> 
      <div class="child"> 
        <img src="img.png"/> 
      </div> 
    </div>