自動垂直對齊任何自動調整大小的圖像

Question

我找不到一個不是固定圖像大小的答案，所以我會問這個答案。

我有一個在其中的圖像與該圖片可以是任何大小的div。我需要它來自動縮放和自動對齊。我可以很好地調整它，但垂直對齊它是一個挑戰。我需要它是中心垂直對齊。

HTML + CSS

<div id="myDiv"> 
<img src="./img/example.png"></img> 
</div> 


#myDiv { 
position: absolute; 
height: 100%; 
width: 100%; 
top: 0%; 
left: 0%; 
text-align: center; 
} 

#myDiv img { 
height: auto; 
width: auto; 
max-height: 70%; 
max-width: 70% 
} 

Answer 1

在一個盒子裏的圖像的該實施例的力的水平和垂直對準;在這個特定的情況下，被限制爲130x130px。在css中的兩個單獨的位置更改定義爲130px的寬度和高度以更改約束大小。

[編輯：加入簡化的示例示出最小所需的設置]

簡化的例子：

HTML：

<div class="pic"> 
    <img src="/path/to/pic.jpg"/> 
</div> 

CSS：

.pic { 
    display: inline-block; 
    width: 130px; 
    height: 130px; 
    outline: solid 1px #cccce3; 
    font-size: 0; 
    text-align: center; 
} 

.pic:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

.pic img { 
    max-width: 130px; 
    max-height: 130px; 
    display: inline-block; 
    vertical-align: middle; 
} 

完成爲例e：

原始codepen顯示更復雜的例子：http://codepen.io/anon/pen/culvD。

這裏的HTML：

<ul class="pics"> 
    <li> 
    <div class="pic"> 
     <img src="/path/to/pic1.jpg"/> 
    </div> 
    </li> 
    <li> 
    <div class="pic"> 
     <img src="/path/to/pic2.jpg"/> 
    </div> 
    </li> 
</ul> 

和這裏的CSS：

ul.pics { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
} 

ul.pics li { 
    display: inline-block; 
    width: 130px; 
    margin: 4px; 
    padding: 6px; 
    background-color: #e6e6ec; 
    outline: solid 1px #cccce3; 
} 

ul.pics li .pic { 
    height: 130px; 
    font-size: 0; 
    text-align: center; 
} 

ul.pics li .pic:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

ul.pics li img { 
    max-width: 130px; 
    max-height: 130px; 
    display: inline-block; 
    vertical-align: middle; 
} 

Answer 2

居中對齊到中心的元素ASIGN它的寬度，然後保證金左，右汽車。