Question

我在流畅的布局中有一个div，我需要保持1：1的宽高比。在这个di v中，我有时会有文字，有时是图像，有时都是。

文本需要垂直对齐。

图像需要垂直对齐并适合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

通过这些更改，您的示例可以在流体宽度下工作。我不确定他们会如何对极端的肖像图像做出反应。

如果没有更改为80％宽度，图像将保持居中，但是会逃避父元素的边界。

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

Answer 2

请在图片标记中添加以下样式。

style="width:100%;height:100%"

检查jsfiddle

使图像适合div和垂直对齐

2 个答案: