包含一个图像，其大小是动态的Div

我正在研究这种模态图像查看器。问题是，我无法添加一个div，这将是一个图像的容器。我需要这个div，因为我想在其中添加导航按钮。重点是根据浏览器大小调整图像大小。最大高度：80％;被设置为图像的CSS。 我需要div的大小与图像的大小相同。 请告诉我该怎么做。包含一个图像，其大小是动态的Div

下面是HTML

<div id="imagePlaceholderContainer"> 
    <img id="imagePlaceholder" src="images/full/Full28.jpg" /> 
</div>

这里是CSS

#imagePlaceholder { 
    margin: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 999; 
    max-height: 80%; 
    border: 5px solid black; 
}

感谢。

来源

2013-11-04 Marc Andre Jiacarrini

您需要的样式应用到div而不是图像

#imagePlaceholderContainer { 
    margin: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 999; 
    max-height: 80%; 
    border: 5px solid black; 
} 

#imagePlaceholder { 
    height:100%; 
    width:100%; 
}

的jsfiddle：http://jsfiddle.net/R49mW/

你叉从重复的问题小提琴：http://jsfiddle.net/wwbd4/

来源

2013-11-04 02:32:21 keeg

有一个小问题。该div正在扩展到相同大小的浏览器和图像也是100％。我需要的图像大小是最大高度80％和div只是包含它.. –

我已经把jsfiddle你看。它正在工作，你有其他代码可能是干扰吗？ – keeg

我用小提琴再次提出了这个问题。看到这里http://stackoverflow.com/questions/19761308/how-can-i-resize-the-div-dynamically-according-to-the-containing-image-size –

包含一个图像，其大小是动态的Div

回答

相关问题