html - div中的动态图像尺寸

Question

当图像丢失时，需要以百分比显示 div 宽度。由于图像是动态加载的，我无法修复图像大小。所有图像尺寸均以百分比表示。那么我们如何在没有加载图像的情况下获得适当的 div 宽度。

这是演示。 http://jsfiddle.net/7LfMV/2/

Answer 1

尝试更改table-cell为inline-block- http://jsfiddle.net/7LfMV/4/

.wraptocenter {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    width: 60% /*Div should take this width*/; 
    background-color:#999
}

Answer 2

http://jsfiddle.net/7LfMV/5/

删除display: table-cell;并添加height到 div

Answer 3

没有图像时，使用min-height,min-width设置height, 。width

由于您使用的是 display:table-cell 我猜您是在 div 内将图像居中，这将做到这一点。

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
    min-height:300px;
    min.width:300px;
}

在这里提琴 http://jsfiddle.net/7LfMV/6/