css - 使图像适合 div 并垂直对齐

Question

JSFiddle

我有一个流动布局的 div，我需要保持纵横比为 1:1。在这个 div 中，我有时有文本，有时有图像，有时两者都有。

文本需要垂直对齐。

图像需要垂直对齐并适合 div 并保持其自身的纵横比。

我已经实现了上面的大部分，我唯一的问题是我无法让图像垂直对齐并且同时不超过 div 的大小。

这使 div 保持 1:1 的比例:

#upload-drop{
    background-color: #e6e6e6;
    position: relative; 
}

#upload-drop:before{
    content: "";
    display: block;
    padding-top: 100%;
}

#upload-drop >div{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

垂直对齐内容:

.valign-center{
    text-align: center;
    white-space: nowrap;
}
.valign-center:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.valign-center-content{
    display: inline-block;
    vertical-align: middle;
}

最后，这使图像保持其宽高比并适合父 div:

#upload-img {
    width: 100%;
    height: 100%;
}    
img{  
    width:auto;
    height:auto;
    max-width: 100%;
    max-height: 100%;
}

如果我删除 #upload-img 上的宽度和高度，所有内容都会垂直对齐，但纵向图像现在将不再适合 div。

我怎样才能让他们一起玩得开心？

Answer 1

通过这些更改，您的示例可以在流动宽度下工作。我不确定他们会对极端的肖像图像有何 react 。

如果不更改为 80% 宽度，图像将保持居中，但会脱离父元素的边界。

#upload-img{
    width: 100%;
    max-height: 100%;
}    
img{  
    width:auto;
    height:auto;
    max-width: 80%;
    max-height: 100%;
}